ScrollTrigger pinning - bumpy animation in Safari

[brianecook]

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) => {
  ScrollTrigger.create({
    trigger: elem,
    start: () => 'top top',
    pin: true,
    anticipatePin: -3,
    pinSpacer: elem.parentNode,
    pinSpacing: false,
  });
});

[GSAP Helper]

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: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

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.

[brianecook]

It's not as jumpy on the codepen as on the site I sent the link for, but if you use mousewheel to scroll instead of trackpad, you can see it on Safari. That jumpiness is not on Firefox or Chrome.

 

See the Pen YzRvJrj by brianecook88 (@brianecook88) on CodePen

[Rodrigo]

Hi,

 

Sorry, I don't have a Mac so I can't test on Safari 🤷‍♂️

 

Did you tried ScrollTrigger.normalizeScroll(true) in your code? I don't see it in your latest codepen.

 

Happy Tweening!

[brianecook]

That method makes pinning work a little better than before, but now mousewheel scroll is jumpy/bumpy on all browsers.

[Rodrigo]

Hi,

 

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 .

 

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!

[brianecook]

@Rodrigo Would you mind checking Safari as well? It is really poor performance in there.

[GreenSock]

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.