GSAP 滚动触发销无法正常工作 [反应]

Question

我有一个 200vh 高的容器，里面有一个 50 x 50 像素块。

我的任务是确保当我滚动容器时该块固定在中心。

https://pastebin.com/ZjxPmYcs

我期望类似的行为，只有一个大块并且没有平滑滚动 - https://stackblitz.com/edit/react-iqmjfx?file=src%2FApp.js

Answer 1

首先，运行以下命令来安装必要的软件包

npm i gsap-trial @gsap/react

之后，尝试下面的代码

import { useRef } from "react";

import gsap from "gsap-trial";
import { ScrollTrigger } from "gsap-trial/ScrollTrigger";
import { useGSAP } from "@gsap/react";

import "./App.css";

gsap.registerPlugin(useGSAP, ScrollTrigger);

function App() {
  const container = useRef<any>(null);

  useGSAP(
    () => {
      ScrollTrigger.create({
        trigger: ".box-c",
        pin: true,
        start: "center center",
        end: '+=' + (container.current?.clientHeight - 400),
        markers: false,
      });
    },
    { scope: container }
  );

  return (
    <div
      ref={container}
      style={{ width: "100%", overflow: "visible", height: "200vh" }}
    >
        <div
          className="box-c"
          style={{
            position: "absolute",
            left: "50%",
            transform: "translateX(-50%)",
            zIndex: 100,
            backgroundColor: "green",
            width: 50,
            height: 50,
            top: "0px",
          }}
        >
          s
        </div>
    </div>
  );
}

export default App;