Horizontal scroll jumping when using element scroller

[lhug]

Hi there,

I’m having an issue implementing a design where a vertical scroll transitions to a horizontal. The sticky horizontal scroll section is jumping when the transition happens. I have done a similar setup that doesn‘t include scroller: ".outer" where it does not occur, how ever this content will be loaded in a modal and from what I have ready I need to use scroller so it is not connected to the body container.

You will see the first image jump upwards when rapidly scrolling. It seems to occur more on the first and last couple images. Any help would be greatly appreciated.

See the Pen LYvoPzp by leightonhughes (@leightonhughes) on CodePen

[Rodrigo]

Hi @lhug and welcome to the GSAP Forums!

 

I read your post a few times and looked at your demo, but I can't seem to understand what exactly is the problem you're having, maybe I'm missing something obvious here 🤷‍♂️

 

It'd be great if you could expand a little more on this and share more details about what is happening and how.

 

This is what I'm seeing when I run your codepen demo:

https://i.imgur.com/OIzbadZ.mp4

 

Then when I use the mouse wheel I can't see anything unusual or wrong.

 

Happy Tweening!

[lhug]

Hi @Rodrigo, thanks for getting in touch. When you scroll my codepen you should see the images jump upwards for a split second when the horizontal transition takes place. If you scroll fast it is more noticeable.

[Rodrigo]

Sorry still can see anything. This is a screen recording on my desktop, for the first 8 seconds I'm pressing start and end like a lunatic in order to quickly scroll to the top and bottom, then I'm using page up/down and I can't see anything wrong:

https://i.imgur.com/hrIKv8t.mp4

 

Can you see the same behaviour in this recording as you see it in your setup? Again, maybe I'm seeing something normal that is not and totally missing the point here 🤷‍♂️

[lhug]

I’m using Arc browser but also seems to be doing the same in Chrome. You can see the issue here:
https://share.cleanshot.com/r1p2yLMy

[Rodrigo]

Yeah I can't see that on my desktop/laptop (Ubuntu 22 & 20) on the latest firefox and chrome.

 

The only thing I can suggest you is to try ScrollTrigger's normalizeScroll method and pass that scroller element as the target:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

ScrollTrigger.normalizeScroll({
  allowNestedScroll: true,
  target: ".outer"
});

Try that and let us know how it goes.

 

Happy Tweening

[lhug]

That did the trick. Thankyou!