Timeline animations for multiple divs with the same class

[Novice]

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

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

[Visual-Q]

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