Horizontal Scroll Experience

[momo12]

I just started learning Horizontal scrolling. Can someone guide me on what I must do to fix the horizontal section? Is is possible to use a value instead of number for the X and End? So, we don't need to calculate that manually!

 

The footer is not visible in this example.

 

See the Pen ZERzyYL by emdesigner-or (@emdesigner-or) on CodePen

[GreenSock]

3 minutes ago, momo12 said:

I just started learning Horizontal scrolling. Can someone guide me on what I must do to fix the horizontal section? Is is possible to use a value instead of number for the X and End? So, we don't need to calculate that manually!

Sorry, I don't understand your question. You want to "fix" the horizontal section? What's broken? And "value instead of number for the x and end" - can you give me an example? You can use pretty much whatever you want. Function-based values, numbers, strings, whatever. What are you "manually calculating" now that you want to avoid? 

[momo12]

7 minutes ago, GreenSock said:

Sorry, I don't understand your question. You want to "fix" the horizontal section? What's broken? And "value instead of number for the x and end" - can you give me an example? You can use pretty much whatever you want. Function-based values, numbers, strings, whatever. What are you "manually calculating" now that you want to avoid? 

Thanks for your answer @GreenSock 

The footer element is not visible. 

 

I'm using the width and height of the scrollable section... But is there a js code to calculate that?

[momo12]

Now it looks like this:

[Rodrigo]

Hi,

 

Honestly I can't tell you exactly where or how your codepen example is not working as expected, but I believe it lies on the styles more than GSAP. I created an example that uses flex inline so the container's width grows to it's child elements and can also be wrapped around an element with a full width and overflow hidden:

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

 

Also you can take a look at this example of a different approach for horizontal sections:

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

 

Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

Two other tips:

1. By default, if the parent is display: flex, ScrollTrigger will set pinSpacing to false by default because flex containers handle spacing differently, but you can just set pinSpacing: true
2. You cannot do end: "+=500vh" - only px or % works. You can easily accomplish what you have there with end: () => "+=" + (window.innerHeight * 5)

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