ScrollTrigger: Apply Animation on multiple elements

[Sveninyo]

Hi,

I am wondering, why my transition animation is just played on my first section and not on the following. I added the same class (.parallax) to both my text boxes.

Isn't the animation suppose to play on every (each) element that has the class "parallax" applied to it? See my CodePen.

 

Thank for the help!

 

See the Pen yLeJOzb by Sveninyo (@Sveninyo) on CodePen

[ZachSaucier]

Hey Sveninyo.

 

The issue here is that your tween affects all of your parallax sections so the later ones are already done by the time you reach them. To get the effect that you're wanting you should loop through each section, creating a tween and ScrollTrigger for each.

See the Pen abdZZOM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side notes:

• window.innerWidth (or just innerWidth if you prefer) has very good browser support. You don't need to include the viewportWidth variable.
• You can use actual media queries in JS if you want to: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

[Sveninyo]

Cool! Thank you. I learn a lot here 😀