Jump to content
Search Community

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

7up test
Moderator Tag

Recommended Posts

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

@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.
×
×
  • Create New...