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のような非常にスムーズな効果を実現する他のライブラリのデモがあります。これは、より多くの例を見つけることができるドキュメンテーション ページです。

4

1 に答える 1