【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()でwrap
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()でwrap
    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={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>

.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>
  )
}