Smooth Scroll on page

[AlexandrWD]

Hi!
Can you please tell me how to make smooth scrolling, so that it works together with horizontal scrolling.

And how to make a horizontal scroll to the last block (not in %) regardless of the number of blocks and screen width?

See the Pen ZEJKPaa by alexandr-github (@alexandr-github) on CodePen

[akapowl]

Hey there, welcome to the forums @AlexandrWD

 

The basic logic behind fake-horizontal scrolling animations is that you'll need everything to move to the left for its own width in the first place. But because then it would be out of view (with the right side of it ending up out of view flush to the left of the window) you'll have to substract a window's width from that amount for it to end up with its right flush to the right of the window. All that would ideally happen scrubbed over the course of the same amount of scrolling with the tween itself having its ease set to "none".

 

There are various examples for how to set up a fake-horizontal-scrolling page in the demo-section.

 

Here is another one by me, that I just added GSAP's own smoothScroll() to. You'll find the most basic example of that smoothScroll() function on the .scrollerProxy() documentation page. That demo has quite a few comments for what is neccessary for it to work in the first place. Hope it'll help  

 

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

 

[AlexandrWD]

4 hours ago, akapowl said:

Hey there, welcome to the forums @AlexandrWD

 

The basic logic behind fake-horizontal scrolling animations is that you'll need everything to move to the left for its own width in the first place. But because then it would be out of view (with the right side of it ending up out of view flush to the left of the window) you'll have to substract a window's width from that amount for it to end up with its right flush to the right of the window. All that would ideally happen scrubbed over the course of the same amount of scrolling with the tween itself having its ease set to "none".

 

There are various examples for how to set up a fake-horizontal-scrolling page in the demo-section.

 

Here is another one by me, that I just added GSAP's own smoothScroll() to. You'll find the most basic example of that smoothScroll() function on the .scrollerProxy() documentation page. That demo has quite a few comments for what is neccessary for it to work in the first place. Hope it'll help  

 

 

Please help. Why does the horizontal scroll break in my version? What am I doing wrong?

See the Pen qBXjdYP by alexandr-github (@alexandr-github) on CodePen

 

[GreenSock]

If I understand your goal correctly, the problem is that you're pinning an element INSIDE a <div> that has a fixed height of 100vh, so when ScrollTrigger adds pinSpacing (padding to the bottom of the pinned element), it isn't pushing things down further on the page because your CSS isn't allowing that container to grow accordingly. 

 

In other words, it's an issue with the way you set up your CSS/markup. Maybe just remove the height: 100vh from that catgorieswr container?

[AlexandrWD]

5 minutes ago, GreenSock said:

If I understand your goal correctly, the problem is that you're pinning an element INSIDE a <div> that has a fixed height of 100vh, so when ScrollTrigger adds pinSpacing (padding to the bottom of the pinned element), it isn't pushing things down further on the page because your CSS isn't allowing that container to grow accordingly. 

 

In other words, it's an issue with the way you set up your CSS/markup. Maybe just remove the height: 100vh from that catgorieswr container?

Yes! Thank u!