Jump to content
Search Community

Overlapping TimelineMax Tweens

pfash 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 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:

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

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