GSAP ScrollTrigger不适用于我的盒子

Question

我正在尝试学习GSAP，我希望在滚动时能看到一些元素，并且我找到了一个用于GSAP的ScrollTrigger插件。但是，它不起作用。当滚动时，它会向后滑动，但当向下滚动时，什么都不会出现。

import { useLayoutEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import gsap from "gsap";
import styled from "styled-components";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

const Container = styled.div`
  height: 4000px;
`;

function App() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    gsap.from(".box", {
      scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true,
        markers: true,
      },
      x: -1500,
      opacity: 0,
    });
  }, []);

  return (
    <>
      <Container>Hello World</Container>
      <div
        className="box"
        style={{ backgroundColor: "red", width: 300, height: 300 }}
      ></div>
      <Container></Container>
    </>
  );
}

export default App;

Answer 1

我注意到了一些问题：

，

1. ，您正在导入常规的gsap模块(很好)，但是接下来是导入非模块的ScrollTrigger (从/dist/目录)。您应该只从" gsap / ScrollTrigger“导入ScrollTrigger (或者从/dist/ -导入gsap和ScrollTrigger)，这很可能是useLayoutEffect()在严格模式下被useLayoutEffect()的React双调用所咬到的，这种模式会干扰" from ()”tweens。这很容易通过使用gsap.context()来解决，我们强烈建议在任何反应环境中使用它。

请阅读关于在React中使用GSAP的文章：https://greensock.com/react

它还说明了如何使用gsap.context()。

如果你仍然有问题，请在https://greensock.com/forums的论坛上随意发布，同时提供一个最小的演示，我们很乐意浏览一下并回答任何与GSAP相关的问题。

推特快乐！