Jump to content
Search Community

ScrollTrigger pinning - bumpy animation in Safari

brianecook test
Moderator Tag

Recommended Posts

I have a site that pins sections to the top of the browser window with scroll trigger. This works pretty well, except in Safari, where the scrolling animation is unsmoothy, and bumpy/jumpy. It is particularly bad when scrolling with a mousewheel as opposed to a trackpad. Is there anything I can do to improve the quality of the scroll animation?


gsap.utils.toArray('[data-panel]').forEach((elem) => {
    trigger: elem,
    start: () => 'top top',
    pin: true,
    anticipatePin: -3,
    pinSpacer: elem.parentNode,
    pinSpacing: false,
Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen


Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 


Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 


Finally you could try adding will-change: transform to the elements that are behaving jumpy in order to see if that improves somehow.

Link to comment
Share on other sites



Yeah normalizeScroll can help mostly on mobile browsers and using ScrollSmoother, but with regular ScrollTrigger has that particular effect on desktop browsers.


Another thing you could try is use will-change: transform in the elements and remove normalizeScroll. Honestly I'm having a bit of a hard time following your example because I don't have a lot of knowledge on CSS animations/transitions, since I've always used GSAP :D.


I tested your codepen on Chrome and Firefox on a laptop running Ubuntu 22 and I don't see any problems.


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

  • 3 weeks later...

I don't see any jumping at all, but you're running into that issue with Apple browsers related to graphics rendering (a browser issue, not GSAP) that we already discussed in your other thread. Try adding this at the top of your code: 

gsap.config({force3D: false})

Does that help at all? 


The reality is that you're asking a LOT of the browser graphics-wise when you scale something up that huge. The browser has to calculate all those pixels, even the ones off-screen. The more pixels you ask the browser to render, the harder it is on the CPU/GPU. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...