GSAP ScrollTrigger 不适用于我的盒子答案

【问题标题】：GSAP ScrollTrigger doesnt work with my boxGSAP ScrollTrigger 不适用于我的盒子
【发布时间】：2022-11-18 03:05:50
【问题描述】：

我正在尝试学习 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;

【问题讨论】：

标签： javascript css gsap

【解决方案1】：

我注意到几个问题：

您正在导入常规 gsap 模块（良好），但随后您正在导入非模块 ScrollTrigger（来自 /dist/ 目录）。您应该只从“gsap/ScrollTrigger”导入 ScrollTrigger（或者从 /dist/ 导入 gsap 和 ScrollTrigger - 只要保持一致）
您可能会被 React 在严格模式下对 useLayoutEffect() 的双重调用所困扰，这会与“from()”补间混淆。这很容易通过使用我们强烈推荐在任何 React 环境中使用的 gsap.context() 来解决。
请在此处阅读有关在 React 中使用 GSAP 的文章： https://greensock.com/react

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

如果您仍然遇到问题，请随时在https://greensock.com/forums 的论坛中发帖并附上最简单的演示，我们很乐意查看并回答任何与 GSAP 相关的问题。

补间快乐！

【讨论】：