TimelineMax #to vs #fromTo

[Toby Nicholas]

Hi folks!

 

I'm struggling to get to grips with TimelineMax.fromTo(). If I have two tweens on a timeline, tweening first from, say, { opacity:  0 } to { opacity: 0.75 } and then from { opacity: 0.75 } back to { opacity: 0 }, when creating the timeline my target element has its opacity set to the from state of the second tween (i.e. 0.75). I was expecting it to take on the opacity in the from state of the first tween (i.e. 0).

 

Now I can get around this using immediateRender: false (though this is less convenient), but I'm still trying to work out why the initial opacity set during render is coming from the second tween in the timeline and not the first.

 

No doubt I'm missing something obvious. Any ideas what?!

 

Thanks!

 

 

See the Pen EBbvLe by tobynicholas (@tobynicholas) on CodePen

[PointC]

On paused timelines with from(), fromTo(), staggerFrom(), staggerFromTo() tweens, immediateRender is true. Setting it to false is your best option. There were some recent changes between 2.1.0 and 2.1.2 regarding this default behavior.

 

More details:

https://github.com/greensock/GreenSock-JS/releases/tag/2.1.2

 

Happy tweening.

 

[PointC]

You could also use set() and to() tweens if you like. Some people find that a bit less confusing than from() tweens. I'd also like to point out the yoyo and repeat properties would allow you to use less tweens in your timeline.

 

So your example could be written like this:

tl1.fromTo('#green', 1, {opacity: 0}, {opacity: 0.75, yoyo:true, repeat:1});

 

Happy tweening.

[Toby Nicholas]

Thanks! 

I can use immediateRender: false as a workaround, in conjunction with manually setting the initial state, and I'll check into a combination of set() and to() tweens as well.  Are you able to help me understand what I should expect the initial state to be when setting multiple fromTo() on a paused timeline, as per the Codepen? 

 

 

[PointC]

With multiple fromTo() tweens, the last one in the sequence will be where the target will sit when the code loads and the timeline is paused. Take this code for example:

var tl = new TimelineMax({paused:true});
tl.fromTo(target, 1, {x:100}, {x:200});
tl.fromTo(target, 1, {x:200}, {x:300});
tl.fromTo(target, 1, {x:300}, {x:400});

 

That target will be sitting at x:300 until the timeline plays. At that time it will jump back to 100 and play the tweens in sequence. 

 

See the Pen dBZmzJ by PointC (@PointC) on CodePen

 

You can override that with immediateRender:false on the 2nd and 3rd tweens. Does that make sense?

 

Happy tweening.

[PointC]

PS https://greensock.com/immediateRender

[Toby Nicholas]

Bingo!

 

Thanks so much, both the Codepen and the link really help. Using immediateRender: false on just the second fromTo() does exactly what I need:

 

See the Pen oroqKM by tobynicholas (@tobynicholas) on CodePen