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

Posted 2023-05-08

【中文标题】具有自定义滚动值的 GSAP ScrollTrigger 断断续续

【英文标题】：GSAP ScrollTrigger choppy with custom scroll value

【发布时间】：2021-06-12 01:36:06

【问题描述】：

我正在试验 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 Locomotive Scroll。这是文档页面，您可以在其中找到更多示例ScrollTrigger ScrollProxy() 我不明白为什么我的如此简陋。

【参考方案1】：

问题来了：

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

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

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

将来，可能值得在 GreenSock forums 中提问 - 我们会很快回复，这是一个完全致力于回答 GreenSock 相关问题的社区。​​p>

补间快乐！