Animating same class on scroll with stagger

[Dovisally]

Hello there,

 

i made a quick demo on code pen, what i want to do is i have blocks over almost the majority of the text on my website

these blocks has the same class so i want to animate this class on scroll with a stagger, stagger should work only for the visible elements

and so on.. i hope you get the idea is it possible ?

 

also i notice the animation is happening for all blocks not on scroll how to fix that ?

See the Pen RwrXLLr by dovisally (@dovisally) on CodePen

[mikel]

Hey @Dovisally,

 

It is a question of logic.
You need the array of sections and then the respective '.block', which you can then stagger.

 

See the Pen oNbKopZ by mikeK (@mikeK) on CodePen

 

Please use the current GSAP scrollTrigger version.

 

Happy scrolling ...

Mikel

[ZachSaucier]

Mikel is completely right. Just noting that the "ScrollTrigger" version you are loading in your demo @Dovisally is not GreenSock/GSAP at all. It's some other library called ScrollTrigger that hasn't been maintained and isn't compatible.

[mikel]

 

Is that a fake? An imitator?

[ZachSaucier]

4 minutes ago, mikel said:

Is that a fake? An imitator?

No, just some little library that was made before ScrollTrigger. We didn't figure it'd be a big deal to name ours the same thing since it's a good name and the library is very much not used (except when people accidentally load it instead of our plugin, hah).