Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Overlapping TimelineMax Tweens

Recommended Posts

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.)


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.


See the Pen gqEvzK by pfash (@pfash) on 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!


See the Pen gqEvzK by pfash (@pfash) on CodePen

Link to comment
Share on other sites

I think what you're looking for are negative relative positions rather than a delay. But I maybe misunderstanding. If there are to be any two tweens on a single timeline overlapping for any amount of a time, a negative relative position can pull it back on the timeline so the tweens don't butt up to each other. Have a look here to see if this helps


See the Pen LqaQaz by sgorneau (@sgorneau) on CodePen


  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Yes, Shaun.

That's exactly what I wanted.

Thanks a lot.


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