ScrollTrigger forEach item horizontally

[gweatherson]

Hello! I'll try my best to explain this.

 

The horizontal scroll is working perfectly, but now what I am trying to achieve is: Control each item (.section-list__item) when it reaches the left-hand side of the viewport. Right now all of the 6 items are running the console.log when the trigger is reached.

 

I plan to run a separate function for each that will fade-in the sub-title and other content. Thank you!

See the Pen BaxgjXb by gweatherson (@gweatherson) on CodePen

[Rodrigo]

Hi,

 

You can use ScrollTrigger's Container Animation for this:

 

Here is a simple example that uses a similar approach of what you are describing:

See the Pen ZEoNRgx by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!