React Horizontal Scroll Sections

[Taun]

Hi. I don't understand why my code isn't rendering? When I got it to render in VSCode, it rendered the images vertically in a column, not horizontally.
I thought flex-direction:row would make the slider display in a row?

Code Sandbox: 
https://codesandbox.io/s/gsap-horizontalscrolltrigger-mz7d68?file=/src/components/scrollsection.scss:47-167

.scroll-section-inner {

height: 100vh;

width: 100vw;

display: flex;

flex-direction: row;

position: relative;

}

[Rodrigo]

Hi,

 

A few things. Your demo is not working. I reloaded it a few times and it stays white.

 

Using display flex is not enough to get things working for horizontal sections. You also need to set the flex container to not wrapping it's child elements if they exceed the width and the flex basis property of the child elements as well.

 

Here are a couple of demos that show how the CSS is constructed:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Taun]

Thanks!