GSAP 웹 고성능 애니메이션 JS 라이브러리

GSAP은 GreenSock Animation Platform의 약자로, 웹에서 고성능 애니메이션을 만들기 위한 자바스크립트 라이브러리이다. 

HTML, SVG, CSS, 캔버스 요소 등을 포함한 다양한 웹 요소를 부드럽고 정교하게 애니메이션화할 수 있게 설겨되었다. 

성능, 사용 용이성, 브라우저 호환성이 뛰어나다. 

 

GSAP는 애니메이션 프레임을 최적화하여 CPU와 GPU를 효율적으로 활용한다. 

CSS 애니메이션보다 더 부드럽고 안정적인 결과를 제공하고, 모바일에서도 잘 작동한다. 

 

간단한 이동 애니메이션부터 복잡한 타임라인 기반 시퀀스까지, 다양한 애니메이션 작업을 지원한다. 

 

ScrollTrigger, Draggable, MorphSVG 같은 플러그인을 통해 추가 기능을 쉽게 확장할 수 있다. 

 

직관적인 API, 코드가 간결하고 읽기 쉽다. 

 

오래된 브라우저에서도 잘 동작하고, IE6+부터 최신 브라우저까지 호환된다.

 

1. 기본 사용법 (예시)

GSAP를 사용하려면 먼저 라이브러리를 프로젝트에 추가해야 한다. 

CDN을 통해 간단히 불러올 수 있다. 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

 

애니메이션을 다음과 같이 적용한다. 

 

// 요소를 2초 동안 오른쪽으로 100px 이동
gsap.to("#myElement", { 
  x: 100, 
  duration: 2 
});

 

gsap.to() : 대상 요소를 특정 상태로 애니메이션화 

x: x축 이동거리, duration: 애니메이션 지속 시간(초 단위)

 

2. 주요 메서드 

gsap.to() : 시작 상태에서 끝 상태로 애니메이션 

gsap.from() : 끝 상태에서 시작 상태로 애니메이션 

gsap.fromTo() : 시작과 끝 상태를 모두 정의 

gsap.timeline() : 여러 애니메이션을 순차적/동시적으로 조합

 

gsap.to("타겟", {속성: 속성값, .....});

//x축으로 300 이동하는데 2초가 걸린다+딜레이 5초
gsap.to('.box-1', {x: 300, duration: 2},5);

 

gsap.from("타겟", {속성: 속성값, .... });

//x축 300에서 제자리로 돌아오는데 2초 걸린다+딜레이3초
gsap.from('.box-1', {x: 300, duration: 2},3)

 

gssp.fromT0("타겟", {시작 속성: 시작 속성값, ... }, {끝나는 속성: 끝나는 속성값, ....});

시작 속성에는 ease, duration, delay, onComplete 사용 못한다. 

gsap.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0});

 

gsap.set("타겟", {속성: 속성값, ... });

여러개 속성을 동시에 설정 가능하다. 

CSS를 미리 설정할 수 있지만 페이지 로딩 후 바로 보여야 하는 애니메이션의 경우 gsap보다 CSS에서 직접 설정한다. 

//scale 0.8인 상태에서 1.5로 변하는 애니메이션
gsap.set('.sc_intro',{scale: 0.8});
gsap.to(".sc_intro", {
    opacity: 0.5,
	scale: 1.5,
    },
});

 

gsap.timeline("타겟", {속성: 속성값, ....});

연속적인 애니메이션을 설정한다. 

변수 선언 후 원하는 순서대로 애니메이션 설정이 가능하다. 

const tl1 = gsap.timeline();
tl1.fromTo(".box-1", {y: 50}, {duration: 2, x: 500, y: 0});//{앞에쓴게 to}{뒤에쓴게 from}
tl1.to(".box-1", {duration: 2, x: 0, y: 0, delay: 1});//1초 후에 애니메이션 작동
tl1.to(".box-1", {duration: 2, opacity: 0.5});

 

타임라인 사용 예제

const tl = gsap.timeline();
tl.to("#box1", { x: 200, duration: 1 })
  .to("#box2", { y: 100, duration: 1 }, "-=0.5") // 이전 애니메이션과 0.5초 겹치게 시작
  .to("#box3", { rotation: 360, duration: 2 });

 

인터렉티브 웹사이트, 스크롤 기반 애니메이션(ScrollTrigger 사용), UI 요소의 전환 효과, 게임이나 데이터 시각화 애니메이션 등에서 활용할 수 있고 실제로 유려한 애니메이션을 포함한 사이트에서 많이 사용하고 있다. 

 

GSAP은 무료로 기본 기능을 사용할 수 있으나 고급 플러그인(MorphSVG, DrawSVG 등)은 GreenSock의 유료 멤버십을 통해 제공된다. 

 

https://greensock.com

 

공식 사이트에 방문하면 문서와 데모를 확인할 수 있다. 

 

GSAP 고기능 애니메이션 라이브러리