Jump to content

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

Stagger issue. Different between 2.x and 3.x,help

Recommended Posts

In TweenMax 2.x, use TweenMax.staggerTo, first element yoyo repeat first.


But in gsap 3.x, use stagger attribute, first element start first, but yoyo last. not same result as above.

See the Pen bGNVwJp by 7up (@7up) on CodePen


How, can I get the same result using gsap 3.x? @ZachSaucier

See the Pen LYEpRXg by 7up (@7up) on CodePen

Link to comment
Share on other sites

Hey 7up and thanks for posting.


GSAP 3 gives you additional control over how staggers work. Now you can (and should in this case) include the repeat and yoyo inside the staggers if you want them to repeat immediately and not wait for the others to finish:


See the Pen qBEOqdg?editors=0010 by GreenSock (@GreenSock) on CodePen


Thanks a lot for the clear, minimal demo!


I'm currently working on a video that explains staggers in more detail including this.


P.S. It's generally best to use x instead of left because using left causes reflows. Also you don't have to manually include "px" - GSAP is smart enough to do that for you :) 

  • Like 1
Link to comment
Share on other sites

Thank you for the key and tips. @ZachSaucier

So, am I right about this: params in vars controls whole timeline of list. Put into the stagger, controls each element?


And looking forward to a detail document of the new, strong "stagger" feature.?

Link to comment
Share on other sites

7 minutes ago, 7up said:

params in vars controls whole timeline of list

Technically they control the animation that is applied to each element. i.e. what the animation is going to do.


7 minutes ago, 7up said:

Put into the stagger, controls each element

Technically it controls the timing of the animation for each element. i.e. when the animation happens.

Link to comment
Share on other sites


On 12/6/2019 at 12:38 PM, ZachSaucier said:


In your demo, how we should work with events callback ?
Example if you want call a event each circle ?

the onRepeat not work if we put outside, stagger.
It work if we put inside, but it compute from each elements.

See the Pen povgbGm by djmisterjon (@djmisterjon) on CodePen

Link to comment
Share on other sites

@jonForum Think of the parent tween like a timeline, and the staggered tweens like children of that timeline - if each child tween infinitely repeats, the parent timeline would NEVER repeat because it'd never reach the end. See what I mean? The concept of an onRepeat doesn't really apply well in the scenario you described...right? Like, if all the children are independently repeating, where exactly do you draw the line in terms of a "repeat" on the parent? All the children would be at various repeat cycles at any point in time. See the dilemma? 


Perhaps if you describe the exact behavior you want (and why), we could offer a suggestion. 

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