Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'transitions'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 10 results

  1. Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet. Thanks all for help! And i have another question, about page transitions, shared element transitions between pages. See website reference at link: https://alfacharlie.co/ See the effect of transitions between pages, the softness the animations. I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?
  2. Hi, Is it possible with Greensock to achieve an effect were as a div slides over some text, the text changes color, but only the text covered by the div changes color. Visual Example: In the Codepen supplied I have a red bar that slides over some text and I would like the text to change to white whenever the red bar slides over it, however, whenever any of the text isn't covered by the red bar, I would like that text to remain black. I was thinking a blend-mode might do this, but alas it seems not, because there isn't a blend mode that would turn the text from black to white (as far as I can tell). I'm kind of thinking this isn't possible? But I thought I would ask here in case. Kind regards, Paul
  3. CSS3 transitions have some significant limitations that make them unworkable for a serious animation platform. They don’t provide precise controls over the timing or easing. They’re great for simple effects but the GreenSock Animation Platform delivers extremely precise rendering, so you can do things like pause() and reverse() an animation anytime or skip to a specific time and play from there, etc. Try creating a CSS3 transition that uses an elastic.out or slow motion ease and then jump to 0.72494-seconds into a 2-second transition and pause() only to resume() later. It’s impossible from what I understand. So no, the platform doesn’t make use of CSS3 transitions. However, it is highly optimized for performance. See the detailed cage match where GSAP battles CSS3 transitions where there’s a detailed comparison in several categories.
  4. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale/translate/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links Speed test Draggable Demo CSS Transitions/Animations vs. GSAP Cage Match jQuery vs. GSAP Cage Match Why GSAP? A practical guide for developers UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple)
  5. Link: http://higherskies.com/v2.1/ First time submitting to the forums. Real quick want to say I'm loving GSAP. If you follow the link provided, the page loads and I have a timeline controlled welcome text and continue button animate onto the screen. What I'm trying to achieve is when I click the continue button it will then scroll to the next section of the page, the "Who We Are" section... In my sidebar when I click on "Who We Are" button it smoothly scrolls to the appropriate Anchor tag. How can I get the same result with the timeline function: continueBtn() here is my timeline code: <script> var introText = document.getElementById("introText"); var introBtn = document.getElementById("introBtn"); var welcomeText = document.getElementById("welcomeText"); var logo = document.getElementById('logoBtn'); var welcomeBtn = document.getElementById('welcomeBtn'); var whoWeAreBtn = document.getElementById('whoWeAreBtn'); var servicesBtn = document.getElementById('servicesBtn'); var contactBtn = document.getElementById('contactBtn'); var t1 = new TimelineLite(); t1.staggerFrom([introText,logo,welcomeBtn,whoWeAreBtn,servicesBtn,contactBtn],0.25,{ x:950, opacity:0, ease: Expo.easeOut,delay:1},.25 ); t1.to(welcomeText,.02,{transformPerspective:800}); t1.to(welcomeText,1,{transformPerspective:800,rotationY:20,ease: Bounce.easeOut}); t1.from(introBtn,.75,{ rotationX:-90, transformOrigin:"left top", ease: Bounce.easeOut} ); function welcomeTextHover() { t1.to(welcomeText,.75,{rotationY:0,overwrite:"all"}); } function welcomeTextHoverOut() { t1.to(welcomeText,.75,{rotationY:20,overwrite:"all"}); } function continueBtn() { t1.to(introBtn,.25,{ x:-900, ease: Expo.easeOut} ); t1.to(introText,.25,{ x:900, autoAlpha:0, ease: Expo.easeOut} ); // wait for animations to play out then scroll to next section. } </script> Thanks for any help you can offer. I hope I was descriptive enough. ~Nick
  6. Hello to all, Firstly, thank you for making such a wonderful and amazing plugin. I am a complete newbie in the world of javascript so please be patient with me. I am making a slide in and out page transition after an ajax request, however, Its not very smooth and flawless. Can I please get some pointers on what options I can use to make this look beautiful like the transitions here - http://tympanus.net/Development/PageTransitions/ See how the footer jumps after new content is loaded.
  7. Hey, I am currently working on a project that requires full page transitions. As an example pages are div elements that are approximately 1024x600 in size and contain content. Pages slide in and out from left to right (emulating the ebook feel). At the moment the page change/transition process goes like this: * Page in view has visibility 'visible' and willChange '' set * set willChange 'transform' on outgoing page *Slide outgoing page out of view * set visibility 'hidden' and willChange '' on outgoing element after animation finished * set visibility 'visible' and willChange 'transform' on incoming element. *Inserted delay (~300ms) - to allow some breathing room for browser paint times and composition(layer creation) *Slide incoming page into view * set willChange '' on incoming page once animation is finished I have put in the delay to give the browser time to paint and promote the div to a composite layer before animating for smooth animations. However the delay required on different devices obviously varies. Is this something lagSmoothing can help with or does any one have any other/better techniques for this type of situation? Jack has already suggested: Don’t alter the will-change property at all. Take the layerization hit at a time that’s less critical. Maybe at startup (not sure how many things you may have to layerize, so you may have to stagger things). You can, for example do TweenLite.set(element, {force3D:true}) and it’ll get layerized right away. That way, when you actually go to animate its transforms, it’s already layerized and ready-to-go. My understanding was that setting will-change:'transform' on the element layerized when it is set, so is there any differences between using that or TweenLite.set(element, {force3D:true}) ? The other thing is deciding when to layerize the pages. Because the pages are quite large doing all the pages ahead of time floods the GPU memory and would probably kill the device so it seems the only option is too layerize pages as they are needed. Since that can take some time depending on the device I am currently inserting the delay during the animation sequence to help but I would much rather a more dynamic approach (no need delaying on devices that dont need too or might need longer). Any input or advice would be appreciated, thanks.
  8. DiscoStu

    Spinning images

    On GreenSock's home page, part of the animation at the top is the different browser logos (Safari/Chrome etc) spinning from one into another. I want to do exactly that with a set of photos. Does anyone have an example of the code to do this?
  9. Hi there, sorry if this question has been asked and answered before. I tried to search, but have not found anything similliar. The idea is to make a transition where i start the transition with one easing and end up with an other easing. i.e. with Power3.easeIn and end with Back.easeOut. I would imagine something like this: TweenLite.to(jQuery('.item'),0.5,{x:100,y:100,ease:"Power3.easeIn, Back.easeOut"}); I tried with space, comma without success. I know i could make two animations for this after each other and making time half etc.. but i was just curious if there is a shortcut like shown above ? Thanks for your time and answer, Krisztian
  10. Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!
×