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의 유료 멤버십을 통해 제공된다.
공식 사이트에 방문하면 문서와 데모를 확인할 수 있다.

'기술' 카테고리의 다른 글
SCSS vs SASS (0) | 2025.03.08 |
---|---|
Styled Components 리액트 컴포넌트 스타일 (1) | 2025.03.08 |
Laravel 웹 애플리케이션 프레임워크 PHP (0) | 2025.03.07 |
Tailwind CSS 프레임워크 사용하기 (0) | 2025.03.06 |
웹크롤링과 웹스크래핑 (5) | 2025.02.28 |
댓글