我是 gsap 的新手,并尝试在其上制作一些动画,但是当我将 gsap 设置为标题时,它不起作用。 这是我的代码:
import { gsap } from "gsap";
let tl = gsap.timeline();
useEffect(() => {
tl.from(".lastHeader", { y: 50, duration: 1 });
}, []);
提前致谢。
为了避免在每次渲染时创建新的时间线,在效果内创建时间线并将其存储在引用中非常重要。
这也将允许您以不同的效果访问时间线。
请参阅此处的示例:
function App() {
const el = useRef();
const q = gsap.utils.selector(el);
const tl = useRef();
useEffect(() => {
tl.current = gsap.timeline()
.to(q(".box"), {
rotate: 360
})
.to(q(".circle"), {
x: 100
});
}, []);
return (
<div className="app" ref={el}>
<Box>Box</Box>
<Circle>Circle</Circle>
</div>
);
}
更多信息在这里:https://greensock.com/react/
您必须在
useLayoutEffect
之外定义 timeLine 变量。
const comp = useRef(null);
const tl = useRef<gsap.core.Timeline | null>(null);
useLayoutEffect(() => {
const ctx = gsap.context(() => {
tl.current = gsap
.timeline()
.from("your-element", {
duration: 4,
delay: 0.4,
opacity: 0,
y: 200,
ease: "power3.inOut",
})
}, comp);
return () => ctx.revert(); // cleanup
}, []);
import { gsap } from "gsap";
const tl = useRef()
useEffect(() => {
tl.current = gsap.timeline()
.from(".lastHeader", { y: 50, duration: 1 });
}, []);
您可以使用这样的代码。