ScrollSmoother breaks sticky objects

[taropaa]

Hi, 

I am using ScrollSmoother.js on my website. I have sticky elements inside the main wrapper, which I cannot place outside. How can I mitigate this?

Thank you, 

Adrian

[Cassie]

Hi there, sorry to say there's not really anything you can do to mitigate it.

It's not down to GSAP persay, more that you can't have fixed elements inside a transformed container (like the ScrollSmoother container). It's a web platform thing that we can't change.

 

The options are either move the elements outside the scroller in the DOM, (or reparent them on interaction if they're modals?) or use a different solution like Lenis, Lenis doesn't smooth all inputs though, soif someone drags the scrollbar or tabs down the page it won't be smooth. It's also a third party solution so we can't speak for compatibility.

Sorry that you've run into this and good luck getting it fixed, happy to answer any questions you may have.

 

[taropaa]

Hi Cassie, Thank you for getting back to me on this. Like you said I may have to come up with a GSAP-friendly way to deal with sticky elements. If I find a universally viable solution I will post it here.