useGsap

安装

在reactjs使用gsap可以结合官方的useGsaphook进行开发，项目地址：

pnpm i gsap @gsap/react

特性1 - 自动销毁revert()

传统在react中使用gsap需要手动进行revert()对动画对象进行销毁

import { useEffect,useRef } from "react";import gsap from "gsap";
useEffect(()=>
    let ctx = gsap.context(() => {
        gsap.to(...);
        gsap.from(...);
        gsap.timeline().to(...).to(...);
        ...
    });
    return ()=> ctx.revert();
},[]);

在useGsap中，所有gsap实例会自动销毁，甚至不需要使用context()api

import { useRef } from "react";
import gsap from "gsap";
import { useGSAp } from "@gsap/react";

const box = useRef();
useGSAP(() => {
  gsap.to(box.current, { x: 360 }); //自动调用 reverted()
});

特性2 - 多元素快速选择{scope: Ref}

传统进行多元素渲染的写法1：

// 不直观且代码冗余较明显
const Text: React.FC<any> = ({ text = "Capsion" }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const arr = [1, 2, 3, 4, 5, 6];
  const refs = useRef<(HTMLDivElement | null)[]>([]);
    
  useGSAP(
    () => {
      // 过滤空引用确保类型安全
      const validRefs = refs.current.filter(Boolean) as HTMLDivElement[];
      gsap.to(validRefs, {});
    },
    { scope: containerRef }
  );
    
  return (
    <div className=".container" ref={containerRef}>
      {arr.map((item, key) => (
        <div
          key={key}
          ref={(element) => {
            refs.current[key] = element;
          }}
          className="eachDivItem"
        >
          {item}
        </div>
      ))}
    </div>
  );
};

使用useGsap的写法：

const Text: React.FC<any> = ({ text = "Capsion" }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  useGSAP(
    () => {
      gsap.to(".eachDivItem", {});
    },
    { scope: containerRef }
  );
  return (
    <div className=".container" ref={containerRef}>
      <div className="eachDivItem"></div>
      <div className="eachDivItem"></div>
      <div className="eachDivItem"></div>
      <div className="eachDivItem"></div>
      <div className="eachDivItem"></div>
    </div>
  );
};

特性3 类似useEffect的依赖收集特性

const Text: React.FC<any> = ({ text = "Capsion" }) => {
  const [endX, setEndx] = useState(0);
  useGSAP(
    () => {
      gsap.to("any", {});
    },
      
    // 但数组设置，与effect的设置相同
    [endX], 

      
    // 对象配置scope，这里可以是一个纯数组
    { 
        scope: containerRef, 
        dependencies: [endX], // [endX], 与effect的设置相同
        revertOnUpdate: true, // 是否在元素发生挂载时重新执行动画
    }
  );
  return <div className=".container" ref={containerRef}></div>;
};

特性3 - contextSafe()确保上下文安全

// 对一些元素点击事件的绑定函数包装
useGSAP((conttext, contextSafe) => {
  gsap.to(onLoadBox.current, { delay: 1 });

  const onClick = contextSafe(() => {
    gsap.to(onLoadBox.current, { x: "+100" });
  });

  onLoadBox.current.addEventListener("click", onClick);

  console.log("context: ", context.data.length);

  return ()=>{
  onLoadBox.current.removeEventListener("click", onClick);

  }
});

API用法

const {conttext, contextSafe} = useGsap({scope:"", dependencies:[props]})

  const onClick = contextSafe(() => {
    gsap.to(onLoadBox.current, { x: "+100" });
  });

参阅文献：

• 官方教程：https://www.youtube.com/watch?v=l0aI8Ecumy8