React에서 GSAP 사용법 완벽 정리

React 프로젝트에서 세련된 애니메이션을 구현하고 싶다면, GSAP(GreenSock Animation Platform) 는 매우 강력한 도구입니다.
이 글에서는 GSAP의 기본 개념부터 React에서의 실습 적용 방법까지 친절히 소개합니다.

 

1. GSAP 설치

먼저 프로젝트에 GSAP을 설치합니다.

npm install gsap

 

2. React에서 GSAP을 사용할 때의 핵심 포인트

GSAP은 DOM에 직접 접근해서 애니메이션을 적용합니다.
따라서 React에서는 보통 다음 조합으로 사용합니다:

• useRef: DOM 요소 접근
• useEffect: 컴포넌트 마운트 타이밍에 애니메이션 실행

3. 기본 예제 – 박스를 오른쪽으로 이동시키기

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";

const GsapBox = () => {
  const boxRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    gsap.fromTo(
      boxRef.current,
      { x: 0, opacity: 0 },
      { x: 200, opacity: 1, duration: 1.5, ease: "power2.out" }
    );
  }, []);

  return (
    <div
      ref={boxRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "#4caf50",
        margin: "100px auto",
      }}
    />
  );
};

export default GsapBox;

 

4. 클릭 시 애니메이션 적용하기

const handleClick = () => {
  gsap.to(boxRef.current, {
    scale: 1.2,
    backgroundColor: "#ff5722",
    duration: 0.4,
    ease: "back.out(1.7)",
  });
};

<button onClick={handleClick}>애니메이션 실행</button>

 

5. Timeline을 활용한 순차 애니메이션

GSAP의 timeline()을 사용하면 여러 애니메이션을 순차적으로 연결할 수 있습니다.

useEffect(() => {
  const tl = gsap.timeline();
  tl.to(boxRef.current, { x: 100, duration: 1 })
    .to(boxRef.current, { rotate: 360, duration: 1 })
    .to(boxRef.current, { scale: 0.8, duration: 0.5 });
}, []);

6. ScrollTrigger 사용 (스크롤 연동)

import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

useEffect(() => {
  gsap.to(boxRef.current, {
    x: 100,
    scrollTrigger: {
      trigger: boxRef.current,
      start: "top center",
      end: "bottom center",
      scrub: true,
    },
  });
}, []);

 

7. 애니메이션 클린업 (컴포넌트 언마운트 시 정리)

useEffect(() => {
  const tween = gsap.to(boxRef.current, { ... });

  return () => {
    tween.kill(); // 컴포넌트가 언마운트될 때 애니메이션 정리
  };
}, []);