Problem with ScrollTrigger

[Carl-FG]

Hello !
I'm learning how to use ScrollTrigger but I'm having a problem creating a horizontal scroll. The width and height of my sections are present but no background-color is activated and no text is displayed. The code comes from the video: https://greensock.com/docs/v3/Plugins/ScrollTrigger

Thanks for your patience!

See the Pen QWZJymL by pseudoaupifcartropduratrouver (@pseudoaupifcartropduratrouver) on CodePen

[akapowl]

Hello Carl, welcome to the GSAP forum.

 

The main problem is that your CSS is not set up to align the sections beside one another.

 

So you'll want to have another look at the many many examples for fake-horizontal scenarios like that to see how you can get that done - e.g. using flex on your main-container and adjusting everything according to that properly, or alternatively using a display: inline/inline-block setup for your sections.

 

Here is your demo with the main container scaled down to showcase the issue causing your troubles (scroll down a bit to see the problem).

 

See the Pen mdzQmeg by akapowl (@akapowl) on CodePen

 

 

You can find some examples fake-horizontal setups here...

 

https://greensock.com/st-demos/

 

... and this here is one of my demos.

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen

 

 

 

Edit:

Here is a rather basic Flex-Layout for your convenience - this one might be a bit easier to wrap your head around.

 

See the Pen RweqVKm by akapowl (@akapowl) on CodePen

 

 

 

[Carl-FG]

Thank you for your response and the time you took to help me. I was indeed able to solve this problem by changing the style by putting a display flex and a width at 500% (100% * the number of sections). I have another question, what is the purpose of the start: "top top"?

[Cassie]

That means - "Start animating when the top of the trigger element hits the top of the viewport"

You can enable markers to see where those trigger points fall like so -

 

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

 

docs - https://greensock.com/docs/v3/Plugins/ScrollTrigger/start