GSAP and horizontal scroll

[Doltario]

Hi guys, I'm doing my very first steps on GSAP, and it is actually pretty impressive ! 

But I have a little problematic piece of work.

I'm building a website where there's an horizontal scroll. Basically that are divs next to each others and I translate them on scroll.

I want to animate on scroll some of element in those divs. But it seems scrollTrigger and horizontal scroll ain't friends at all.

More exactly, the animation is triggered when the page is loaded, not when the element enters the viewport.

 

So I decided to reproduce that in a very simple way ( that's the codepen ). You will see that it won't work when it is horizontal, but once you put it vertical ( by commenting out the 10th line of the CSS) the animation will trigger as expected.

 

Am I missing something ? (I surely must be) 

 

Also I searched a bit about that but I did not find any similar topic,

Thanks in advanced guys !

See the Pen LYGyBqm by Doltario (@Doltario) on CodePen

[ZachSaucier]

Hey Doltario and welcome to the GreenSock forums.

 

The biggest issue is that you didn't load ScrollTrigger at all  Second, you need to specify that the scroller is horizontal inside of the ScrollTrigger object. If you want it to only fire once, then set once: true as well:

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

[Doltario]

Oh lord, newbie making newbie error I guess. 

 

Thanks a lot for your time Zach !