Stagger timeline to each element

[jb_sulli]

Hi,

 

I'm new to GSAP so hopefully there is a way to do this. The Codepen has an example of the desired effect and it works... just wondering if there is an easier way. I have multiple elements, all with the same timeline animation, playing one after another. Is there an easier way to do this? Something like create the timeline without an element and do something like the following: 

 

master_timeline.stagger($('.box'), generic_timeline);

 

I know there is staggerTo/staggerFrom functions but that's just for a single tween.

 

Thanks for your help!

 

- Josh

See the Pen prXNpY by jb_sulli (@jb_sulli) on CodePen

[PointC]

Hi @jb_sulli

 

Welcome to the forum.

 

That's how I would do it - loop through and create a timeline for each element. That will give you quite a bit of control over everything. If you don't want to add them to a master, you also have the option of creating a delay for each timeline based on its index. Here's a fork of your demo with that possibility.

 

See the Pen BdgEJK by PointC (@PointC) on CodePen

Happy tweening. 

[jb_sulli]

Hi @PointC

 

Thank you for your response! I learned a lot by breaking down what you did there. My project does need the master timeline because I need to be able to scrub back and forth as well as pause easily. Good to know I was on the right track! Thank you for sharing your solution.

[PointC]

Happy to help.

 

Yep - if you need to add them to a master, you're doing it right. Good job. I'm sure you saw the other thing I changed was removing the delays from the second set of tweens and instead used the position parameter on the label. If you haven't started using the position parameter yet, here's some great reading:

 

https://greensock.com/position-parameter

 

Happy tweening.