TUTORIAL

GSAP 애니메이션 프로 마스터 가이드

고급 웹 애니메이션 기법의 정수. GSAP Timeline, Plugins, ScrollTrigger로 프로 수준의 인터랙티브 애니메이션을 구현합니다.

럿지 AI 팀
2025-01-15
15분
GSAP 핵심 개념

GreenSock Animation Platform으로
고성능 웹 애니메이션을 만들어보세요.

Tween

단일 애니메이션

Timeline

연속 애니메이션

Plugins

확장 기능

기본 Tween

// gsap.to - 현재 → 목표
gsap.to(".box", {
  x: 100,
  rotation: 360,
  duration: 1,
  ease: "power2.out"
});

// gsap.from - 시작점 → 현재
gsap.from(".box", { opacity: 0, y: -50 });

// gsap.fromTo - 시작 → 끝
gsap.fromTo(".box", { x: 0 }, { x: 200 });

Timeline 활용

const tl = gsap.timeline();

tl.to(".box1", { x: 100 })
  .to(".box2", { y: 50 }, "-=0.5")  // 0.5초 겹침
  .to(".box3", { rotation: 360 })
  .to(".box4", { scale: 1.5 }, "<"); // 동시 시작

인기 플러그인

ScrollTrigger

스크롤 기반 애니메이션

Draggable

드래그 인터랙션

MotionPath

SVG 경로 따라 이동

SplitText

텍스트 분할 애니메이션

Easing 함수

power1
power2
power3
elastic
bounce
back

관련 태그

#GSAP
#Animation
#ScrollTrigger
#Timeline
#WebAnimation