7up Posted December 6, 2019 Share Posted December 6, 2019 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 More sharing options...
7up Posted December 6, 2019 Author Share Posted December 6, 2019 TweenMax 2.x again Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 6, 2019 Share Posted December 6, 2019 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 1 Link to comment Share on other sites More sharing options...
7up Posted December 6, 2019 Author Share Posted December 6, 2019 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 More sharing options...
ZachSaucier Posted December 6, 2019 Share Posted December 6, 2019 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 More sharing options...
jonForum Posted December 9, 2019 Share Posted December 9, 2019 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 More sharing options...
GreenSock Posted December 9, 2019 Share Posted December 9, 2019 @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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now