Jump to content

marko krstic

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

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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!!!! ❤️

  • Like 2
Link to comment
Share on other sites

Glad to help and save you some time ?


Happy tweening!

  • Like 1
Link to comment
Share on other sites

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.



  • 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.