0

我正在试验 gsap 的 ScrollTrigger。我有一个自定义滚动容器，想使用 ScrollTiggers 滚动代理来劫持滚动。结果非常不稳定。难道我做错了什么？这是我到目前为止的一个例子。代码沙盒

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 Locomotive Scroll。这是文档页面，您可以在其中找到更多示例ScrollTrigger ScrollProxy()我无法弄清楚为什么我的如此笨拙。

4

1 回答 1

2

这是问题所在：

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

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

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

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

补间快乐！

于 2021-03-15T01:09:41.603 回答