带有自定义滚动值的GSAP ScrollTrigger波折

Question

我正在试验gsap的ScrollTrigger。我有一个自定义滚动容器，并希望使用ScrollTiggers滚动器代理劫持卷轴。但结果很不稳定。我做错了什么吗？下面是我到目前为止所得到的一个例子。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"
});

从代码框演示中可以看到，滚动非常平滑，但是标记在整个地方都在弹跳，绿色广场应该是平滑的，但是当你滚动而不是平滑地缩放时，它是在弹跳。还有来自其他库的演示，它们实现了非常平滑的效果，比如这个示例ScrollTigger机车卷。这里是文档页面，您可以在这里找到更多的例子，ScrollTrigger ScrollProxy()，我不明白为什么我的例子如此简陋。

Answer 1

问题是：

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

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

您只是忘记实际调用ScrollTrigger.update()方法:)

在未来，它可能是值得问在GreenSock论坛 -我们反应很快，这是一个社区完全致力于回答与绿色袜子有关的问题。

推特快乐！