Hi all. I've been using and loving GSAP/ScrollTrigger for a little while but am new to the forums (well, I've spent plenty of time reading but first time posting). So I'll echo many other first time posters by saying a big thanks to the GreenSock team for all the GSAP magic and support you guys provide to the community here. Much appreciated.
Anyway - my question is to do with pinning elements in ScrollTrigger. I've made a quick codepen recreating the issue I'm having, and really hoping someone can help me out. The site I'm working on is using Ajax for page/content transitions, and so my ScrollTrigger is set up where the inner container is the 'default' scroller, rather than the document body.
The problem I'm having now, which you should be able to see in my codepen, is the pinned section of the page jumping/wobbling rather than being tightly pinned as it hits the trigger's 'start' position.
On this particular page where I'm having the issue, I've got a canvas element being created by PIXI.js as the page loads. I thought at first that maybe this was causing the problem, as I seem to remember reading in the docs somewhere that changes to the DOM after ScrollTriggers have been created can throw them off. (Although the canvas element being created shouldn't be changing the layout at all, as it's contained within its larger section?)
What I did realise, is that when I change the 'scroller' element back to the default, rather than my '.scroll-wrapper' - the problem is fixed, and the pinning works smoothly as expected. So I'm at a bit of a loss. Is this a problem with my '.scroll-wrapper'? I'm using that scroll-wrapper on other pages of the site and things are pinning smoothly.
Here's a fork of my codepen that's NOT using my custom scroller/scroll-wrapper, to save you having to mess around with it, and the pinning working perfectly. https://codepen.io/stuartmack/full/yLXBLJb
I've read that using 'anticipatePin' when pinning these large sections can help, but this doesn't seem to make any discernible difference for me here.
Would massively appreciate any help on this one! Thanks!
EDIT: If you're not seeing the wobbly behaviour on this bottom codepen, please try viewing it full-screen or refreshing it!