GSAP이란?
GSAP은 GreenSock Animation Platform의 줄임말입니다.
JavaScript로 애니메이션을 만들 때 많이 사용하는 라이브러리이고, DOM 요소의 위치, 크기, 투명도, 회전 같은 값을 부드럽게 변경할 수 있습니다.
CSS animation으로도 간단한 효과는 만들 수 있지만, 여러 애니메이션을 순서대로 연결하거나 스크롤과 함께 제어해야 할 때는 GSAP이 훨씬 편합니다.
설치 방법
프로젝트에서 GSAP을 사용하는 방법은 크게 두 가지입니다.
CDN으로 불러오는 방법입니다.
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
npm으로 설치하는 방법입니다.
1
npm install gsap
React나 Vite 같은 환경에서는 보통 npm으로 설치한 뒤 import해서 사용합니다.
1
import gsap from "gsap";
gsap.to()
gsap.to()는 현재 상태에서 목표 상태로 애니메이션을 실행합니다.
1
2
3
4
gsap.to(".box", {
x: 100,
duration: 1,
});
이 코드는 .box 요소를 현재 위치에서 오른쪽으로 100px 이동시킵니다.
duration은 애니메이션이 몇 초 동안 진행될지를 의미합니다.
gsap.from()
gsap.from()은 시작 상태를 지정하고, 현재 상태로 돌아오게 만드는 애니메이션입니다.
1
2
3
4
5
gsap.from(".box", {
x: 100,
opacity: 0,
duration: 1,
});
이 코드는 .box 요소가 오른쪽 100px 떨어진 위치와 투명한 상태에서 시작해서, 원래 위치와 원래 투명도로 돌아오게 만듭니다.
등장 애니메이션을 만들 때 자주 사용합니다.
gsap.fromTo()
gsap.fromTo()는 시작 상태와 끝 상태를 모두 직접 지정할 때 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
gsap.fromTo(
".box",
{
x: 0,
opacity: 0,
},
{
x: 100,
opacity: 1,
duration: 1,
},
);
첫 번째 객체는 시작 상태이고, 두 번째 객체는 끝 상태입니다.
애니메이션의 출발점과 도착점을 명확하게 제어하고 싶을 때 유용합니다.
timeline()
여러 애니메이션을 순서대로 실행하고 싶다면 timeline()을 사용할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const tl = gsap.timeline();
tl.to(".box1", {
x: 100,
duration: 1,
})
.to(".box2", {
y: 100,
duration: 1,
})
.to(".box3", {
rotation: 360,
duration: 1,
});
이렇게 작성하면 .box1, .box2, .box3 애니메이션이 순서대로 실행됩니다.
delay를 직접 계산해서 이어 붙이는 것보다 훨씬 관리하기 쉽습니다.
자주 사용하는 속성
| 속성 | 설명 |
|---|---|
x | X축 방향으로 이동 |
y | Y축 방향으로 이동 |
opacity | 투명도 변경 |
rotation | 회전 |
scale | 크기 변경 |
duration | 애니메이션 시간 |
delay | 시작 전 대기 시간 |
ease | 움직임의 가속도 |
repeat | 반복 횟수 |
yoyo | 반복할 때 되돌아가는 효과 |
예를 들어 아래 코드는 요소를 커졌다가 다시 작아지게 반복합니다.
1
2
3
4
5
6
gsap.to(".box", {
scale: 1.5,
duration: 0.8,
repeat: -1,
yoyo: true,
});
repeat: -1은 무한 반복을 의미합니다.
애니메이션 제어 메서드
GSAP 애니메이션은 변수에 담아두면 직접 제어할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
const tween = gsap.to(".box", {
x: 200,
duration: 2,
paused: true,
});
tween.play();
tween.pause();
tween.reverse();
tween.restart();
자주 사용하는 메서드는 다음과 같습니다.
| 메서드 | 역할 |
|---|---|
play() | 애니메이션 재생 |
pause() | 애니메이션 일시 정지 |
resume() | 멈춘 위치에서 다시 재생 |
reverse() | 반대 방향으로 재생 |
restart() | 처음부터 다시 재생 |
버튼 클릭으로 애니메이션을 제어해야 할 때 유용합니다.
마무리
GSAP은 JavaScript로 애니메이션을 다룰 때 매우 강력한 도구입니다.
기본적으로는 to, from, fromTo만 알아도 많은 애니메이션을 만들 수 있습니다.
여러 애니메이션을 순서대로 연결해야 한다면 timeline()을 사용하면 코드가 훨씬 깔끔해집니다.
처음에는 작은 박스를 움직이는 예제부터 시작해서, 점점 등장 효과나 페이지 전환 효과로 확장해보면 이해하기 좋습니다.