| GSAP GreenSock Animation Platform | |
| <colbgcolor=#88ce02><colcolor=#fff> 종류 | 자바스크립트 애니메이션 라이브러리 |
| 개발 | GreenSock |
| 발표 | 2006년 (Flash 시절) |
| 최신 버전 | 3.x |
| 언어 | JavaScript, TypeScript |
| 라이선스 | Standard (무료) / Business (유료)[1] |
| 링크 | |
1. 개요
GSAP(GreenSock Animation Platform)는 웹 브라우저에서 고성능 애니메이션을 구현하기 위한 JavaScript 라이브러리이다.과거 Flash가 웹 애니메이션을 지배하던 시절부터 존재했던 유서 깊은 라이브러리로, HTML5 시대로 넘어오면서 자바스크립트 버전으로 재탄생했다.
CSS 애니메이션만으로는 구현하기 힘든 복잡한 시퀀스(순서가 있는 애니메이션), 스크롤 인터랙션, 물리 효과 등을 매우 직관적인 코드로 구현할 수 있게 해준다. 현재 전 세계의 화려한 인터랙티브 웹사이트(Awwwards 수상작 등)의 대다수가 GSAP를 사용하고 있을 정도로 사실상의 표준(De facto Standard) 도구이다.
2. 특징
- 압도적인 성능: 내부적으로 최적화가 매우 잘 되어 있어, jQuery의
animate()등과는 비교할 수 없을 만큼 빠르고 부드럽다. 브라우저의 렌더링 성능을 극한까지 끌어낸다. - 호환성 (Cross Browser): 개발자들이 가장 골머리를 앓는 브라우저 간의 미묘한 호환성 문제(특히 SVG 변형 등)를 내부적으로 알아서 처리해 준다.
- 타임라인 (Timeline): GSAP의 가장 강력한 기능. 여러 개의 애니메이션을 시간 순서대로 배치하고, 전체를 일시 정지하거나 되감기, 속도 조절 등을 할 수 있다.
- ScrollTrigger: 스크롤 위치에 따라 애니메이션을 제어하는 플러그인. 현대 웹 디자인 트렌드인 '스크롤텔링(Scroll-telling)' 구현의 일등공신이다.
3. 다른 라이브러리와의 관계
- Three.js: 3D 객체의 위치나 회전 등을 부드럽게 움직일 때 GSAP를 결합해서 사용하는 경우가 매우 많다.
- Phaser: 캔버스 기반의 2D 게임 엔진들과도 궁합이 좋아, 게임 연출 효과를 줄 때 자주 사용된다.
4. 라이선스 정책 (주의사항)
MIT 라이선스를 따르는 대부분의 오픈소스 라이브러리와 달리, GSAP는 독자적인 라이선스 정책을 가지고 있다.- 무료 사용: 일반적인 웹사이트, 포트폴리오, 광고 배너 등에서는 무료로 사용할 수 있다.
- 유료 사용 (Business Green): 만약 해당 웹사이트나 앱이 유료 회원 전용이거나, 사용자에게 돈을 받고 파는 서비스라면 유료 라이선스를 구매해야 한다.
5. 예제 코드
5.1. 기본 이동 (gsap.to)
.box 클래스를 가진 요소를 오른쪽으로 2초 동안 300px 이동시키는 코드.#!syntax javascript
gsap.to(".box", {
x: 300,
duration: 2,
rotation: 360,
ease: "power2.out"
});
5.2. 타임라인 (Sequencing)
박스 3개가 순서대로 움직이는 애니메이션.#!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 });
[1] 유료 회원 전용 사이트나 앱 등에서는 유료 라이선스가 필요하다.