GSAP ScrollTrigger choppy with custom scroll value Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of GSAP ScrollTrigger choppy with custom scroll value without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am experimenting with gsap’s ScrollTrigger. I have a custom scroll container and want to use ScrollTiggers scroller proxy to hijack the scroll. The results are very choppy though. Am I doing something wrong? Here is an example of what I have so far. CodeSandbox

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import scrollCtl from "./scrollCtl";

gsap.registerPlugin(ScrollTrigger);

const ctl = new scrollCtl();

ctl.on("scroll", () => ScrollTrigger.update);

ScrollTrigger.scrollerProxy(".container", {
  scrollTop(value) {
    return ctl.event.scroll; // getter
  },
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight
    };
  }
});

gsap.to(".test", {
  scrollTrigger: {
    trigger: ".trigger",
    scroller: ".container",
    scrub: true,
    start: "top bottom",
    end: "top top",
    markers: true
  },
  scale: "1.5",
  ease: "none"
});

As you can see from the codesandbox demo the scroll is very smooth but the markers are bouncing all over the place and the green square is supposed to scale up smoothly but it is bouncing around when you scroll instead of smoothly scaling. There are demo’s from other libraries that achieve a very smooth effect like this example ScrollTigger Locomotive Scroll. Here is the documentation page where you can find more examples ScrollTrigger ScrollProxy() I can’t figure out why mine is so janky.

Answer

Here’s the problem:

// BAD
ctl.on("scroll", () => ScrollTrigger.update);

// GOOD
ctl.on("scroll", () => ScrollTrigger.update());

You just forgot to actually call the ScrollTrigger.update() method 🙂

In the future, it might be worth asking in the GreenSock forums – we’re pretty quick to respond there and it’s a community totally dedicated to answering GreenSock-related questions.

Happy tweening!

We are here to answer your question about GSAP ScrollTrigger choppy with custom scroll value - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji