Jump to content


Timeline animations for multiple divs with the same class

Recommended Posts

I test different solutions , but I have a question – I'd like to animate only element with class active. Currently the first element animates third element, why? I learn JavaScript, but still a lot of work ahead of me :-P

See the Pen LQPWGB by anon (@anon) on CodePen

Link to comment
Share on other sites

You are adding the class active to project instances but you are telling gsap to animate the items overlay etc... which is animating all the items regardless of what happens to the project element.


The pen attached moves the variable declarations inside the function and queries the elements inside each specific project element rather than the document. This way you don't need two scenes  and timelines. A scene and timeline  is created for each instance of project and reacts to the trigger independently. I think this is what you're after. 


For whatever reason forEach cannot be passed 'this' directly so we pass it as a variable reference 'self'.


Class toggle active is not required for the animation but you can retain it for other scripts if needed.



See the Pen MQgoxe by Visual-Q (@Visual-Q) on CodePen









  • Like 2
  • Thanks 1
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.