Strange behaviour of a pin element using Scrolltriggers

[nzetala]

Hi everyone,
I'm learning to use GSAP with React and I'm having a problem and I'd like to know how to solve it:
The code sample below is a Scrollanimation animation with a pinned element.
The .rightblock component of the animation is supposed to stay pinned when scrolling and this works fine when scrolling slowly but when scrolling fast, the component leaves its position and covers the other components for a few milliseconds and then jumps back to its position (which is very unpleasant to watch). 
Please note that this phenomenon is worse when the memory size of the .photo and the .frame is large.

 

Link to code sandbox

[Rodrigo]

Hi @nzetala and welcome to the GSAP Forums!

 

I just tested your demo in the latest chrome and firefox on Ubuntu 20 & 22 and I can't seem to reproduce the issue 🤷‍♂️

 

The right section with the pictures remains pinned regardless of how fast I scroll up and down.

 

Maybe you can check the fastScrollEnd config option as @Carl explains here:

https://gsap.com/blog/3-8/#preventoverlaps-and-fastscrollend

 

Happy Tweening!

[GreenSock]

That sounds like it could simply be a consequence of the fact that most modern browsers handle scrolling on a completely different thread than the main JS thread, thus it renders the content as if it was scrolled (without any ScrollTrigger logic applied) first, and THEN when the JS thread executes, ScrollTrigger does what it must do to pin the element, making it look like it jumps back. 

 

Two things you can try (assuming that's the problem you're noticing):

 

1) Try setting ScrollTrigger.normalizeScroll(true) which forces all the scrolling to occur on the main thread. 

 

2) Use a scroll smoothing library like ScrollSmoother or Lenis which accomplishes a similar thing, unhooking the native scroll and implementing JS-based scrolling instead. 

[nzetala]

2 hours ago, GreenSock said:

That sounds like it could simply be a consequence of the fact that most modern browsers handle scrolling on a completely different thread than the main JS thread, thus it renders the content as if it was scrolled (without any ScrollTrigger logic applied) first, and THEN when the JS thread executes, ScrollTrigger does what it must do to pin the element, making it look like it jumps back. 

 

Two things you can try (assuming that's the problem you're noticing):

 

1) Try setting ScrollTrigger.normalizeScroll(true) which forces all the scrolling to occur on the main thread. 

 

2) Use a scroll smoothing library like ScrollSmoother or Lenis which accomplishes a similar thing, unhooking the native scroll and implementing JS-based scrolling instead. 

Thx for the answer.

Setting ScrollTrigger.normalizeScroll(true)Solved the problem.