React 中的 gsap 时间线

Question

我是 gsap 的新手，并尝试在其上制作一些动画，但是当我将 gsap 设置为标题时，它不起作用。 这是我的代码：

import { gsap } from "gsap";

  let tl = gsap.timeline();

  useEffect(() => {
    tl.from(".lastHeader", { y: 50, duration: 1 });
  }, []);

提前致谢。

Answer 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/

Answer 2

您必须在

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
 }, []);

Answer 3

import { gsap } from "gsap";

const tl = useRef()

  useEffect(() => {
    tl.current = gsap.timeline()
      .from(".lastHeader", { y: 50, duration: 1 });
  }, []);

您可以使用这样的代码。