具有自定义滚动值的 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"
});

正如您从 codesandbox 演示中看到的那样，滚动非常平滑，但标记到处都是弹跳，绿色方块应该平滑地放大，但当您滚动而不是平滑缩放时，它会四处弹跳。有来自其他库的演示可以像这个例子一样实现非常流畅的效果ScrollTigger Locomotive Scroll. Here is the documentation page where you can find more examples ScrollTrigger ScrollProxy()我不明白为什么我的这么卡。

Answer 1

这是问题所在：

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

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

你只是忘了实际调用 ScrollTrigger.update() 方法:)

将来，可能值得在 GreenSock forums 中提问 - 我们在那里的回复速度非常快，而且这是一个完全致力于回答 GreenSock 相关问题的社区。

补间快乐！

具有自定义滚动值的 GSAP ScrollTrigger 断断续续

GSAP ScrollTrigger choppy with custom scroll value

javascript

parallax

gsap

scrolltrigger