GSAP ScrollTrigger不工作与我的盒子

Question

我正在努力学习GSAP，我想要一些元素滑动到视图时滚动，我发现了一个ScrollTrigger插件的GSAP。然而，它不起作用。向上滚动时，屏幕向后滑动，向下滚动时，屏幕上什么也没有显示。

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"(或者从/dist/中导入gsap和ScrollTrigger -只需保持一致)
2. 你可能会被React在严格模式下对uselayouteeffect()的双重调用所咬伤，这与"from()"吐温类。这很容易通过使用gsap.context()来解决，我们强烈建议在任何React环境中使用。

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

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

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

渐变快乐!