Jump to content
Search Community

TimelineMax tweens with 0 speed execute out of sequence

daveyb 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

Hi and welcome to the forums.

 

The thing is that zero duration and set tweens get the job done immediately  independently of the particular timeline sequence, therefore, even if the instance is at the very end of the timeline, it renders as soon as is created. The way to avoid that is immediateRender:false, with that the particular tween will honor the timeline sequence and render when is due, like this:

var tl = new TimelineMax();

// hide the red block
tl.set(document.getElementById('obj2'), {opacity: 0});

// tween the black block's width to 200px over 2 seconds
tl.add(TweenMax.to(document.getElementById('obj1'), 2, {width: '200px'}));

// then tween to the red block's opacity to 1 over 0 seconds
// (effectively the same as set())
tl.add(TweenMax.set(document.getElementById('obj2'), {opacity: 1, immediateRender:false}));

tl.play();

// the red block's opacity is set to 1 immediately...

In this post there's a lot of discussion regarding this issue and in this particular reply Jack explains with great detail how this particular tweens works under the hood of the engine.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Yep, that's totally normal, and there are a few easy solutions. First, let me explain why it's "normal"...

 

When you create a 0 duration tween, it can't know that you're going to drop that into a timeline to execute later, and in many cases, people were using zero-duration tweens to simply set properties immediately in their code, so it made sense to make it execute right away. For example:

TweenMax.to(element, 0, {width:200});
console.log(element.offsetWidth); //should be 200

So people would have code that depended on the zero-duration tween executing right away, and that completely made sense. 

 

In your case, however, you're NOT wanting it to execute right away, but how can it know that? Well, luckily there's a special property you can set, immediateRender:false. So all you need to do is add that to your tween and you're golden. 

tl.add(TweenMax.to(document.getElementById('obj2'), 0, {opacity: 1, immediateRender:false}));

However, I'd actually recommend using the "set()" convenience method instead because that simplifies all this. Since it's a method of TimelineLite and TimelineMax, it understands that you're probably trying to sequence it for later, so it automatically handles the immediateRender logic for you. Plus it will simplify your code. And by the way, TweenLite and TweenMax have a simple selector engine using getElementById() internally, plus it uses jQuery as a selector by default if you pass a string as the target, so you can simplify that code even further like this:

//OLD (long)
tl.add(TweenMax.to(document.getElementById('obj2'), 0, {opacity: 1, immediateRender:false}));

//NEW (short)
tl.set("#obj2", {opacity:1});
  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

When your tween is created it doesn't know its in a timeline and scheduled to run later. Since it has no duration, it assumes it has already finished. When people use a duration of 0 it implies "do it now".

 

2 solutions

 

1: use immediateRender:false in your tween's vars as shown in this fork of your fiddle:

http://jsfiddle.net/WBGrw/

 

2: use the set() method of TimelineLite instead

tl.set(document.getElementById('obj2'),  {opacity: 1});

for an indepth explanation read this:

http://forums.greensock.com/topic/7671-zero-duration-visibility-tween-on-a-timelineme/#entry29172

Link to comment
Share on other sites

Ha ha, thanks all for your incredibly quick response time and the clear explanations - much appreciated!

 

I was aware of the jquery selectors but unaware of the director selector engine, always nice to get some bonus info.

 

I've only just started using the engine. I have a load of AS2, AS3 and javascript experience behind me but I've not worked with an animation engine that's as fully-featured as this. Excellent work!

 

Thanks again for the quick replies!

 

Cheers

 

Tim

  • Like 1
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...