Stagger multiple objects same class at once and not one by one

[marko krstic 7 Likes (Newbie)]

Hi, 
I have 2 svg files that I stagger true all the lines inside. But problem is that's it's staggering true all lines inside from one object to another and not just true one object.

 

I would like to animate objects separately and to start both animation at once. 

Please help.

See the Pen KEwZwB by krstivoja (@krstivoja) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

Hi @marko krstic,

 

The reason you get this behavior is that you're using a selector of ".line" which will gather all .line elements in the DOM and stagger through them. To affect just a single grouping of them, you'll want to use a unique parent identifier to single out a group. That could be done in a number of ways with selectors of various types ... the easiest would be an id attribute on each SVG. Have a look at this CodePen and my notes within,

 

See the Pen qvZpZy?editors=1010 by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

[marko krstic 7 Likes (Newbie)]

WOW. 
Thank you so much for this @Shaun Gorneau. 
You saved me hours of researching. 

Those are my first animations beside gsap is great tool I find community here even better!!!! ❤️

[Shaun Gorneau 1,503 Likes (Superhero)]

Glad to help and save you some time ?

 

Happy tweening!

[PointC 8,599 Likes (Superhero)]

In addition to @Shaun Gorneau's excellent advice, I recommend this thread with a similar question. 

Jack showed a reusable function and my answer included a loop. Lots of ways to approach it. Happy tweening.