scroll trigger pin animation issue

[codechirag]

Hello guys, I need a help. I am using a pinning animation effect where I make right side section sticky but while it gets sticky it jerks a bit when we scroll fast, can you tell me what will be a good solution for this issue.

https://stackblitz.com/edit/stackblitz-starters-d2csarjb?file=page2.html

[mvaneijgen]

Your Stackblitz doesn't load, it gets stuck on "Booting WebContainer", also what files should we be looking at, currently you're sharing the package.json which does not contain any GSAP code. 

[codechirag]

hi @mvaneijgen,  Thanks for your response.

heere is the codepen

See the Pen vEYLqvK by EmpChirag (@EmpChirag) on CodePen.

 

and the issue of jerking is here. https://www.loom.com/share/92cbcb8ae394452b953759bd6d8e1bce?sid=fbf34b62-cd41-4b52-aea2-b643b0de6dff

[mvaneijgen]

I've looked at your video at 0.5 speed and I can not detect any jerking, seems perfectly smooth to me. If there were any rendering issues that is probably the browser and not something GSAP can fix. You can look in changing the pinType: "transform" https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pinType maybe that more fits your project. But you can also ask your self if someone scrolls really fast on your page, they probably are not paying much attention, so how much would it bother them. 

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Indeed that little jump that you can see sometimes is due to the fact that rendering could be a couple of cycles behind code execution, I've seen that in many demos when scrolling insanely fast, which brings value to @mvaneijgen's point that if a user is actually scrolling that fast is not really interested in part of the content, which is not normally the behaviour of regular users, just developers doing odd things trying to break something. Is pretty much the same with resizing the browser window 50 times in 3 seconds. If you bend something long enough it'll eventually break.

 

You could try anticipatePin:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#anticipatePin

 

Or normalizeScroll in order to put the scrolling in the same thread as JS:

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

 

Hopefully this helps

Happy Tweening!