gsap时间线

Question

我对gsap很陌生，并且尝试在上面做一些动画，但是当我将gsap设置到我的头上时，它就不工作了。这是我的代码：

import { gsap } from "gsap";

  let tl = gsap.timeline();

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

提前谢谢。

Answer 1

import { gsap } from "gsap";

tl = useRef()

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

你可以用这样的代码。

Answer 2

为了避免在每次渲染中创建新的时间线，在效果中创建时间线并将其存储在ref中是很重要的。

这也将允许你以不同的效果访问时间线。

参见这里的示例：

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 3

您必须在timeLine之外定义useLayoutEffect变量。

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