applying same scroll effect on multiple items with same class name

[archimedo]

Hi everyone,

I have a page with few elements with same class name, I'd like to apply a scroll trigger effect to them: basically, when they appear in the bottom of the screen a message on them will appear and when the bottom of this element surpass the bottom of the screen, the message would disappear.

 

I've tried to achieve this using scroll trigger and it seems to work fine but just for the first element. Is there a way to keep just one animation and apply them to every div with same class name or should I add a scroll trigger effect manually to each of this element?

 

Thank you!

See the Pen xxEWKEr?editors=1010 by archemede (@archemede) on CodePen

[ZachSaucier]

Hey archimedo. 

 

3 hours ago, archimedo said:

Is there a way to keep just one animation and apply them to every div with same class name or should I add a scroll trigger effect manually to each of this element?

Definitely! What you're wanting is covered in the most common ScrollTrigger mistakes article. I highly recommend giving the whole thing a read. In short: you need to loop through each of your sections and create an animation and ScrollTrigger for each. You might also learn from my article about animating efficiently which covers doing that sort of thing as well.