Stuttering when using ScrollSmoother

[cptain 4 Likes (Newbie)]

Hello! I wanted to update our company's website to include ScrollSmoother on all of our pages, however, on a particular page I am noticing some heavy stuttering as I am scrolling down. I am possibly utilizing this plugin incorrectly, please let me know if so.

 

Everything works fine until you reach the pricing section. I removed elements 1-by-1 to find the issue. I discovered the problem is the images and ONLY on Edge and Chrome (works on Firefox), but I can't figure out why, as it works perfectly fine on other sections/pages with images. You can check the homepage, which included just as many images (approximately) and even ScrollTrigger animations but there is no stuttering.

 

Here's the demo page https://ds-dev.netlify.app/m300

 

I appreciate any help you guys can provide.

[PointC 14,466 Likes (Superhero)]

Does adding this make any difference?
 

#smooth-content {
  will-change: transform;
}

Happy tweening.

[cptain 4 Likes (Newbie)]

You're a legend @PointC! That fixed it immediately. I appreciate it a lot.

[cptain 4 Likes (Newbie)]

Even though @PointC fixed my initial issue immediately (again thank you so much), I'm running into a similar problem, but worse, this time on mobile. If you visit my demo page on mobile in the link below you will see that scrolling down is extremely buggy. Scrolling with a mouse while simulating a mobile device on a browser works somewhat fine, but the moment touch is introduced, it bugs out entirely.  Apologies if I'm misusing this plugin or if this is covered in the documentation, I cannot seem to find a solution.

https://ds-dev.netlify.app
 

I'm experimenting with the code below (that is affecting this particular page). I know I can remove smoothTouch: 0.1 but then, for some reason I don't understand, the scrollTrigger animations no longer work.

 

/*------------------------------
Register plugins
------------------------------*/
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

/*------------------------------
Init ScrollSmoother
------------------------------*/

ScrollTrigger.normalizeScroll(true);

// create the scrollSmoother before your scrollTriggers
const scrollerSmoother = ScrollSmoother.create({
  smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
  effects: true, // looks for data-speed and data-lag attributes on elements
  smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
});

document.querySelector(".scroll__home").addEventListener("click", () => {
  // scroll to the spot where the bundle section is in the viewport.
  // parameters: element, smooth, position
  scrollerSmoother.scrollTo("#bundle", true, "top 50px");
});

// creates a ScrollTrigger that will fade-in and out the minipod illustrations
gsap.fromTo(
  "#minipod-front",
  2,
  { x: -200, opacity: 0 },
  {
    x: 0,
    opacity: 1,
    ease: Power4.easeOut,
    scrollTrigger: {
      trigger: ".scroll__home",
      start: "top center",
      scrub: 2,
    },
  }
);

gsap.fromTo(
  "#minipod-back",
  2,
  { x: 200, opacity: 0 },
  {
    x: 0,
    opacity: 1,
    ease: Power4.easeOut,
    scrollTrigger: {
      trigger: ".scroll__home",
      start: "top center",
      // markers: "true",
      scrub: 2,
    },
  }
);

gsap.from(".app__mockup", 2, {
  y: 400,
  opacity: 1,
  ease: Power4.easeOut,
  scrollTrigger: {
    trigger: ".app",
    start: "top center",
    // markers: "true",
    scrub: 2,
  },
});

gsap.to(".list-item__heading", 2, {
  y: -20,
  ease: Power4.easeOut,
  scrollTrigger: {
    trigger: ".testimonials__list",
    start: "top center",
    // markers: "true",
    scrub: 2,
  },
});

gsap.to(".list-item__subheading", 2, {
  y: 30,
  ease: Power4.easeOut,
  scrollTrigger: {
    trigger: ".testimonials__list",
    start: "top center",
    // markers: "true",
    scrub: 2,
  },
});

 

[Rodrigo 5,895 Likes (Superhero)]

Hi,

 

I see that you have will-change: transform applied to the smooth content element.

 

Try adding the normalizeScroll option in the ScrollSmoother config:

/*------------------------------
Register plugins
------------------------------*/
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

/*------------------------------
Init ScrollSmoother
------------------------------*/

// No need for this here since it goes inside ScrollSmoother
// ScrollTrigger.normalizeScroll(true);

// create the scrollSmoother before your scrollTriggers
const scrollerSmoother = ScrollSmoother.create({
  smooth: 1,
  effects: true,
  smoothTouch: 0.1,
  normalizeScroll: true,
});

Give that a try and let us know how it works.

Happy Tweening!

[cptain 4 Likes (Newbie)]

@Rodrigo Thank you so much as well for your help, this seems to have fixed it. I'm getting very slight stutters on mobile now which is almost negligible. I'm embarrassed by how easy both fixes were, I had completely misunderstood normalizeScroll. I was certain it was the first thing I tried since it's noted in the docs that it assists over-scrolling on mobile, but I probably did something else. Again, much appreciated!