Help with horizontal scroll

[ginphreak]

Hi forum,

I have a problem with an animation very similar to the one in the example. What I would need is to change panels on every single scroll, without interludes. Can you give me some advice?

Let me explain better: in the example the horizontal part does not change as if it were a slide.

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

[ginphreak]

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

 

This is the result I try to achieve but horizontally

[GreenSock]

Are you asking to apply the snapping immediately instead of there being a bit of a delay? As far as I know, that's not possible because ScrollTrigger needs to wait until the wheel/scroll/touch events stop firing before it can apply its snapping logic, otherwise it would interfere with the user scrolling. 

[ginphreak]

And a solution that work fine with ScrollSmoother enabled?

[Rodrigo]

Hi,

 

Maybe the Observer Plugin could be a better alternative based on what you're describing:

https://gsap.com/docs/v3/Plugins/Observer/

 

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

 

Happy Tweening!

[GreenSock]

12 minutes ago, ginphreak said:

And a solution that work fine with ScrollSmoother enabled?

No, I would not expect that to work with ScrollSmoother because the scrolling mechanics are completely different. 

 

The only thing you could potentially try (which isn't simple) is to create a copy of your section elements that are position: absolute (solely for the purpose of scroll snapping - you should make them invisible, like visibility: hidden), put them OUTSIDE your #smooth-wrapper element, and apply normal CSS scroll snapping to those. 

 

Like @Rodrigo said, perhaps an Observer-based solution would suit you better. 

[ginphreak]

12 hours ago, Rodrigo said:

Hi,

 

Maybe the Observer Plugin could be a better alternative based on what you're describing:

https://gsap.com/docs/v3/Plugins/Observer/

 

 

 

 

Happy Tweening!

Unfortunately with ScrollSmoother active it doesn't work

[Rodrigo]

6 hours ago, ginphreak said:

Unfortunately with ScrollSmoother active it doesn't work

Yeah, my suggestion of using Observer is like the demo I linked in my post, not use scrolling at all, just Observer, at least for the page where you need those particular effects. As Jack mentioned this is not something that is supported out of the box due to the way scrolling works on browsers.

 

Another alternative could be to port this demo to a setup with ScrollSmoother:

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

 

Hopefully this helps.

Happy Tweening!

[ginphreak]

I tried using Observer but nothing: I always have a certain unnatural effect different from what I get by deactivating ScrollSmoother. Other Ideas?

[Rodrigo]

Hi,

 

Sorry I can't think of anything besides what Jack already suggested:

On 1/11/2024 at 5:11 PM, GreenSock said:

The only thing you could potentially try (which isn't simple) is to create a copy of your section elements that are position: absolute (solely for the purpose of scroll snapping - you should make them invisible, like visibility: hidden), put them OUTSIDE your #smooth-wrapper element, and apply normal CSS scroll snapping to those

Good luck with your project

Happy Tweening!