ScrollSmoother not being friendly with ScrollTrigger

[Ken Flores]

Hey my amazing community and GSAP Geniuses!!

When I activate ScrollSmoother, all my pinned elements and animations become noticeably jaggy during slow scrolling. The smoothness is lost, and animations appear jumpy. I’m not sure what I’m doing wrong, but it seems like ScrollTrigger animations aren’t playing well with ScrollSmoother.

See the Pen yyNWBKb by kenneth-brian-flores (@kenneth-brian-flores) on CodePen.

[Rodrigo]

Hi,

 

A few things:

• There are several missing closing tags in your HTML
• You don't have a proper wrapper and content elements setup in your HTML and you're not passing that into ScrollSmoother's configuration as mentioned here:
  https://gsap.com/docs/v3/Plugins/ScrollSmoother/#setup
• A long smooth time means that the element with the content will catch up with the scroll position very slowly, especially at the end of the motion, which can create some sub-pixel rendering of certain elements (stemming from decimal values in the transform applied to the content element). It might be a good idea to use a smaller value.

You can use will-change: transform in the smooth-content element in order to have a better experience. Here is a fork of your demo:

See the Pen WbvBwRQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Ken Flores]

Hi Rodrigo! 

Got it i have fixed all my discrepancies on HTML formatting, thank you so much! I have also added my code to be in the format you have taught me! Thank you again! 

Im still having the same issue and even your fork has it.. Is there anything else I can do to make it smooth using scrollsmoother? Ive been at this today  but still no luck! 

[Rodrigo]

Hi,

 

I tried the demo on a Macbook (Chrome, Firefox, Safari) and a desktop using Ubuntu 22 (Chrome, Firefox) and I can't see any issues while scrolling at any speed 🤷‍♂️

 

Beyond the the advice I already gave you I don't have many more ideas. Maybe check if you have any CSS transition applied to elements or maybe a CSS filter. A CSS transition could be problematic if applied to an element that is being animated with GSAP. Finally CSS filters are terrible for performance.

 

Hopefully this helps

Happy Tweening!