GSAP ScrollTrigger choppy with custom scroll value

Question

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 1

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!