Animating each element combined with timeline

[Sveninyo]

Hello

I'm trying to combine an array of each element (a class in this case) with a ScrollTrigger Timeline animation (simple fade-in, fade-out). But it doesn't work. The console doesn't show any JS errors. I attached a Pen with my code.

 

Thanks for the help.

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

[Carl]

thanks for the demo.

 

Some issues with what you had

• You created 1 timeline outside of the forEach loop.
• Inside the loop you were creating tweens that had ScrollTrigger options but no animation settings
• outside the loop you were creating 2 tweens that had nothing to do with what was happening inside the loop.

Possibly just some formatting issues crept in over time.

 

What you want is to create a timeline for each section with it's own ScrollTrigger settings and tweens as shown below

 

See the Pen ZEoyrXL?editors=0110 by snorkltv (@snorkltv) on CodePen

 

also your .fade elements all started with an opacity of 1 so animating to 1 wasn't doing anything. I set their opacity:0 in the css.

[Sveninyo]

Sure. The animation has to be INSIDE the function ... 😅
Also the const is not needed (anymore).

Thank you heaps!