【GSAP】GSAP Practice【#２５ GSAP Nextjs TimeLine1】

【#２５ GSAP Nextjs TimeLine1】

YouTube: https://youtu.be/W9LOgZIlFrA
https://youtu.be/W9LOgZIlFrA

今回は「useGSAP」を使用した
「timeline」の作成方法について解説していきます。

https://gsap.com/resources/react-basics#creating-and-controlling-timelines

app/page.tsx

'use client'

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

gsap.registerPlugin(useGSAP)

export default function Home() {
  const containerRef = useRef<HTMLDivElement>(null)
  const boxRef = useRef<HTMLDivElement>(null)

  const tl1 = useRef<gsap.core.Timeline>(null)

  const { contextSafe } = useGSAP(
    () => {
      tl1.current = gsap
        .timeline()
        .to(boxRef.current, { x: 300 })
        .to(boxRef.current, { rotate: 360 })
    },
    { scope: containerRef }
  )

  const toggleTimeLine = contextSafe(() => {
    tl1.current?.reversed(!tl1.current.reversed())
  })

  return (
    <main className="w-screen h-screen">
      <div
        ref={containerRef}
        className="size-full flex items-center justify-center bg-slate-300"
      >
        <div
          ref={boxRef}
          onClick={toggleTimeLine}
          className="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-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>
  )
}