Jump to content
Search Community

why is my timeline breaking the initial appearance of my page?

jasper test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm no expert with greensock, but I have done some (I thought) more complicated timelines than this one in the past, so I'm baffled as to why this doesn't work.


I'm just trying to do the (admittedly overdone) thing where several rectangular top DIVs replace each other by exiting left and entering right at intervals.


JSFiddle is here: http://jsfiddle.net/cheolsoo/uLNgX/


If you comment out the JS, you'll see the women doing yoga.  That's meant to be the initial DIV.  The problem is that once I uncomment the JS, that particular DIV is no longer the one that's initially shown.


The timeline seems to work OK once it's gotten past the first few tweens.


Any insights GREATLY appreciated!

Link to comment
Share on other sites

Hi and welcom to the GreenSock forums.


You've landed on probably the trickiest aspect of from() and fromTo() tweens, and perhaps the entire platform, immediateRender.


Try this: http://jsfiddle.net/uLNgX/39/


fromTo() tweens have immediateRender set to true by default (which is convenient a majority of the time). When you have multiple fromTo() tweens scheduled on the same object you can get undesirable results such as the 2nd tween on an object will render its start state BEFORE the first tween has its start state rendered.


The solution is to set immediateRender:false on the tweens that are "messing up" the other tweens.


For an illustration of why fromTo() tweens by default have immediateRender set to true, check this out: http://codepen.io/GreenSock/pen/Amnrc

  • Like 3
Link to comment
Share on other sites

THANK YOU SIR!!! Both for the quick fix and for lighting the way to a deeper (if partial) understanding of the issue.


This is the first stumbling block I'd encountered when using this awesome library; it's nice to overcome it and be pointed at something to look at / rule out next time.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...