【GSAP】GSAP Practice【#２４ GSAP Nextjs UseGSAP２】

【#２４ GSAP Nextjs UseGSAP２】

YouTube: https://youtu.be/dq4_uloIXqA
https://youtu.be/dq4_uloIXqA

今回は「useGSAP」の第２引数で取りうる値について解説します。

https://gsap.com/resources/React/#config-object

app/page.tsx

'use client'

import { useRef, useState } from 'react'
import gsap from 'gsap'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP)

export default function Home() {
  const [valueX, setValueX] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)

  const onClick = () => {
    setValueX(gsap.utils.random(-200, 200, 10))
  }

  useGSAP(
    () => {
      gsap.to('.box', { x: valueX })
    },
    { scope: containerRef, dependencies: [valueX], revertOnUpdate: true }
  )

  //useGSAP登場以前の実装方法

  // useLayoutEffect(() => {
  //   let ctx = gsap.context(() => {
  //     gsap.to('.box', { x: 500 })
  //   })

  //   return () => ctx.revert()
  // }, [])

  return (
    <main className="w-screen h-screen">
      <div
        ref={containerRef}
        className="size-full flex items-center justify-center bg-slate-300"
      >
        <div
          onClick={onClick}
          className="box w-40 h-40 bg-red-700 flex flex-col items-center justify-center text-white font-bold cursor-pointer"
        >
          <p>box1</p>
          <p>{valueX}</p>
        </div>
      </div>
      <div className="size-full flex items-center justify-center bg-rose-300">
        <div className="box w-40 h-40 bg-red-700 flex flex-col items-center justify-center text-white font-bold cursor-pointer">
          <p>box1</p>
        </div>
      </div>
      <div className="size-full flex items-center justify-center bg-sky-300">
        <h2 className="text-3xl font-bold">Section3</h2>
      </div>
    </main>
  )
}