GSAP ScrollTrigger 与自定义滚动值断断续续

问题描述

我正在试验 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"
});

正如您从 CodesandBox 演示中看到的，滚动非常平滑，但标记在各处弹跳，绿色方块应该平滑放大，但是当您滚动而不是平滑缩放时，它会弹跳。有来自其他库的演示可以实现非常流畅的效果，例如这个示例 ScrollTigger Locomotive Scroll。这是文档页面，您可以在其中找到更多示例 ScrollTrigger ScrollProxy() 我不明白为什么我的如此笨拙。

解决方法

问题来了：

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

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

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

将来，可能值得在 GreenSock forums 中提问 - 我们很快就会在那里做出回应，而且它是一个完全致力于回答 GreenSock 相关问题的社区。​​p>

补间快乐！