GSAP

GSAP GreenSock Animation Platform
<colbgcolor=#88ce02><colcolor=#fff> 종류	자바스크립트 애니메이션 라이브러리
개발	GreenSock
발표	2006년 (Flash 시절)
최신 버전	3.x
언어	JavaScript, TypeScript
라이선스	Standard (무료) / Business (유료)[1]
링크

1. 개요

2. 특징

• 압도적인 성능: 내부적으로 최적화가 매우 잘 되어 있어, jQuery의 animate() 등과는 비교할 수 없을 만큼 빠르고 부드럽다. 브라우저의 렌더링 성능을 극한까지 끌어낸다.
• 호환성 (Cross Browser): 개발자들이 가장 골머리를 앓는 브라우저 간의 미묘한 호환성 문제(특히 SVG 변형 등)를 내부적으로 알아서 처리해 준다.
• 타임라인 (Timeline): GSAP의 가장 강력한 기능. 여러 개의 애니메이션을 시간 순서대로 배치하고, 전체를 일시 정지하거나 되감기, 속도 조절 등을 할 수 있다.
• ScrollTrigger: 스크롤 위치에 따라 애니메이션을 제어하는 플러그인. 현대 웹 디자인 트렌드인 '스크롤텔링(Scroll-telling)' 구현의 일등공신이다.

3. 다른 라이브러리와의 관계

• Three.js: 3D 객체의 위치나 회전 등을 부드럽게 움직일 때 GSAP를 결합해서 사용하는 경우가 매우 많다.
• Phaser: 캔버스 기반의 2D 게임 엔진들과도 궁합이 좋아, 게임 연출 효과를 줄 때 자주 사용된다.

4. 라이선스 정책 (주의사항)

• 무료 사용: 일반적인 웹사이트, 포트폴리오, 광고 배너 등에서는 무료로 사용할 수 있다.
• 유료 사용 (Business Green): 만약 해당 웹사이트나 앱이 유료 회원 전용이거나, 사용자에게 돈을 받고 파는 서비스라면 유료 라이선스를 구매해야 한다.

5. 예제 코드

5.1. 기본 이동 (gsap.to)

#!syntax javascript
gsap.to(".box", { 
  x: 300, 
  duration: 2, 
  rotation: 360,
  ease: "power2.out"
});

5.2. 타임라인 (Sequencing)

#!syntax javascript
let tl = gsap.timeline();

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { x: 100, duration: 1 }) // box1이 끝난 뒤 실행
  .to(".box3", { x: 100, duration: 1 });