Sygol Posted June 25, 2020 Share Posted June 25, 2020 Hi guys, I am having a bit of issues with stagger and chained animations within a timeline. I am trying to create a stagger animation on the parent div, which would then include two different tweens (p.first and p.second) within the timeline. Once the animation for the first div is complete, then the next parent div would fire, followed by the third, etc. So basically, GSAP to run: 1) stagger starts; first div anim; 2) p.first anim; 3) p.second anim; 4) end first div anim; 5) begin second div anim; 6) etc. GSAP’s default behaviour is to run 1) stagger anim. on all divs, 2) p.first anim; 3) p.second anim Is the desired behaviour possible? Thanks! See the Pen eYJRLbV by kuba-sygowski (@kuba-sygowski) on CodePen Link to comment Share on other sites More sharing options...
_Greg _ Posted June 25, 2020 Share Posted June 25, 2020 Hi @Sygol! You can try something like this: See the Pen dyGRgeY?editors=1010 by -greg- (@-greg-) on CodePen My idea was stagger (no visible animation) -> use onComplete callback -> get element what complete -> get childrens of this element -> animate childrens 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 The standard way to do this would be to use looping: See the Pen ExPXOWP?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Sygol Posted June 26, 2020 Author Share Posted June 26, 2020 Thanks guys, @Nekiy2 I didn't think of doing it this way, this is nice solution, the only problem is that we kind of get out of our timeline then. I guess, there is no other way than stick with Zach solution, and then if I want to randomise it I would need to shuffle elements inside items array with JavaScript first Link to comment Share on other sites More sharing options...
GreenSock Posted June 26, 2020 Share Posted June 26, 2020 9 minutes ago, Sygol said: I would need to shuffle elements inside items array with JavaScript first FYI, GSAP can do that for you. gsap.utils.shuffle(). So... gsap.utils.shuffle(gsap.utils.toArray(".item")).forEach(...); 5 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