Search the Community

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!