Hi All,
Me again. I'm trying to get my head around the TimelineMax way of animating:
What I want to do seems simple: milestone_1 scales up, pauses for 0.3 sec while milestone_2 scales up. While milestone_2 pauses for 0.3 sec, milestone_1 scales back down then milestone_2 scales back down. (Many elements chained together like this should result in a wave-like progression.) How do I do this?
I've tried different methods, to no avail. Below is one attempt that doesn't work. The result of code below is: milestone_1 scales up, then milestone_2 scales up, then milestone_2 scales down then milestone_1 scales down. Not good. (Btw: I'm writing this code into my script window in Animate CC, so using EaselJS syntax.)
//DOESN'T WORK RIGHT:
var tl2 = new TimelineMax({ yoyo: true, repeat: 1 });
tl2.to( this.milestone_1, 1.2, {scaleY: 2, scaleX: 2} )
.to( {}, 0, {} ); // Dummy tween. Seems like can't make the delay less than 1 sec. Even if set that number to 0, still seems like about a sec delay after scale up.
tl2.to( this.milestone_2, 1.2, {scaleY: 2, scaleX: 2} )
.to( {}, 0, {} );
A secondary issue is what seems like a limit to how short of a delay I can set. Seems like I can't get a shorter than about a sec delay.
Codepen:
(I can also post my test FLA if anyone has Animate CC and wants that.)
I also have a general question that would help me get on a 'learning curve':
For the types of questions above (overlapping tweens and shortening the length of a delay), where would I find the answers? (What terms would I search for, presumably on the Greensock site?)
Thanks much!