Pinned div shifts on scroll

[FedMash]

I have an issue with a pinned div containing svg that shifts on the start of the scroll. I recreated the demo version, but it is more visible in the original version.

I have read the docs and all other posts on the topic I could find and tried 

pinType: "fixed"

But it didnt solve the issue for me. 

 

Thank you in advance!

 

 

 

 

See the Pen Exgwyax by fedmaria (@fedmaria) on CodePen

[ZachSaucier]

Hey FedMash and welcome to the GreenSock forums. I am not seeing any shifting on scroll. Your video also didn't seem to upload correctly or something. Can you please describe what you're expecting to see and what's going wrong? Is it limited to a particular OS or browser?

[FedMash]

HI! Thank you for replying! I`ve updated my post with a gif. Basically, when the "start" meets the "scroll-start" pinned element jumpes or shiftes just slightly. Also, in the dev tools, I can see that the width of the div is recalculated, but not sure why.  

It is the same on Chrome and Firefox.

[ZachSaucier]

This is due to the fact that browsers handle scrolling in a separate thread. Because of this fact and the fact that browsers don't update the main JS thread often enough, some jump like this is inevitable. With that being said, you can experiment with ScrollTrigger's anticipatePin property to limit the amount of jump to get it to as least as possible.

[FedMash]

Ah ok, got it. WIll try with anticipatePin. Thank you!