【React/GSAP】useGSAPで作るテキストアニメーション

$yarn add gsap

$yarn add @gsap/react

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

const container = useRef();

useGSAP(() => {
  //ここにgsapの記述
  gsap.to(".box", {x: 360}); 

}, { scope: container });

const container = useRef();
const box1 = useRef();
const box2 = useRef();
const box3 = useRef();

useGSAP(() => {
  gsap.from([box1, box2, box3], {opacity: 0, stagger: 0.1});
});

return (
  //各要素にuseRefを用いてアクセスする
  <div ref={container}>
    <div ref={box1} className="box"></div>
    <div ref={box2} className="box"></div>
    <div ref={box3} className="box"></div>
  </div>
);

const container = useRef();

useGSAP(() => {
    gsap.from(".box", {opacity: 0, stagger: 0.1});
}, { scope: container }) // 親のRefをスコープにわたす

return (
  <div ref={container}>
    //子孫はuseRefを用いなくてもよい
    <div className="box"></div>
    <div className="box"></div>
    <div className="box"></div>
  </div>
);

const container = useRef();

//下記はコンテキストセーフ
useGSAP(() => {
  gsap.to(".good", {x: 100}); 
}, {scope: container})

//下記が悪い例、クリーンアップできていない
const onClickBad = () => {
  gsap.to(".bad", {y: 100});
};

return (
  <div ref={container}>
    <div className="good"></div>
    <button onClick={onClickBad} className="bad"></button>
  </div>
);

const container = useRef();

//デストラクチャリングを用いて関数を抽出する
const { contextSafe } = useGSAP({scope: container}); 

//contextSafe()でwrapp
const onClickGood = contextSafe(() => {
 gsap.to(".good", {rotation: 180});
});

return (
  <div ref={container}>
    <button onClick={onClickGood} className="good"></button>
  </div>
);

const container = useRef();
const badRef = useRef();
const goodRef = useRef();

useGSAP((context, contextSafe) => {
    
  gsap.to(goodRef.current, {x: 100});

  //コンテキストセーフではない例
  badRef.current.addEventListener("click", () => {
    gsap.to(badRef.current, {y: 100}); 
  });

  //第二引数のcontextSafe()でwrapp
  const onClickGood = contextSafe(() => {
    gsap.to(goodRef.current, {rotation: 180});
  });

  goodRef.current.addEventListener("click", onClickGood);

  //イベントリスナーのクリーンアップ関数
  return () => { 
    goodRef.current.removeEventListener("click", onClickGood);
  };

}, {scope: container});
return (
  <div ref={container}>
    <button ref={badRef}></button>
    <button ref={goodRef}></button>
  </div>
);

<div ref={text} className="text-wrapper">
  <span className="text">P</span>
  <span className="text">L</span>
  <span className="text">A</span>
  <span className="text">Y</span>
  <span className="text">T</span>
  <span className="text">O</span>
  <span className="text">E</span>
  <span className="text">N</span>
  <span className="text">J</span>
  <span className="text">O</span>
  <span className="text">Y</span>
</div>

.text-wrapper {
  color: #fff; /*お好きなフォントカラーを選んでください*/
  font-size: 80px; /*お好きなフォントサイズを選んでください*/
  font-family: "Times New Roman", Times, serif; /*お好きなフォントを選んでください*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1; /*line-heightなくしたほうがカッコ良くなります*/
}

.text {
  transform: translateY(100px);
  display: inline-block; //インライン要素の為
  transition: 0.5s;
}

export const TextAnimation = () => {
  const textWrapper = useRef()

  useGSAP(
    () => {
      gsap.to(".text", {
        delay: 0.2,
        duration: 0.5,
        ease: "power2.out",　//型がリテラル型なので注意
        stagger: 0.05,
        y: 0,
      })
    },
    //scopeで親を指定すると子孫はuseRefでアクセスせずそのまま操作できる
    { scope: textWrapper },
  )

  return (
   <div ref={textWrapper} className="text-wrapper">
     <span className="text">P</span>
     <span className="text">L</span>
     <span className="text">A</span>
     <span className="text">Y</span>
     <span className="text">T</span>
     <span className="text">O</span>
     <span className="text">E</span>
     <span className="text">N</span>
     <span className="text">J</span>
     <span className="text">O</span>
     <span className="text">Y</span>
  </div>
  )
}