- GSAP은 무엇이고 언제 사용할까
- GSAP 시작하기
- 첫 번째 애니메이션 만들기
- from과 fromTo 이해하기
- 자주 쓰는 옵션 정리
- 여러 애니메이션을 순서대로 실행하기
- 처음 사용할 때 자주 하는 실수와 연습 순서
GSAP은 무엇이고 언제 사용할까
GSAP은 GreenSock Animation Platform의 줄임말로, 웹 페이지 안의 요소를 JavaScript로 움직이게 만드는 애니메이션 도구입니다. HTML 요소의 위치, 투명도, 크기, 회전, 색상 같은 값을 시간에 따라 바꾸고 싶을 때 사용합니다. 예를 들어 랜딩 페이지의 제목이 아래에서 올라오며 나타나거나, 버튼이 살짝 커지며 강조되거나, 여러 카드가 차례대로 등장하는 효과를 만들 수 있습니다.
입문 단계에서는 GSAP을 거대한 인터랙션 도구보다 “CSS 값을 JavaScript로 자연스럽게 바꿔주는 도구”로 이해하면 쉽습니다. CSS transition만으로도 간단한 hover 효과는 만들 수 있지만, 여러 요소를 순서대로 움직이거나 중간에 멈추고 다시 실행해야 할 때는 GSAP이 훨씬 다루기 편합니다.
CSS 애니메이션과 GSAP의 차이
CSS 애니메이션은 스타일시트 안에서 움직임을 선언하는 방식입니다. 비교적 단순하고 브라우저 기본 기능만으로 동작한다는 장점이 있습니다. 반면 GSAP은 JavaScript 코드로 애니메이션을 제어합니다. 그래서 사용자의 클릭, 스크롤, 페이지 상태, 데이터 변화에 맞춰 움직임을 다루기 쉽습니다.
예를 들어 “버튼을 누르면 카드 세 개가 0.2초 간격으로 나타난 뒤 제목이 커진다” 같은 흐름은 CSS만으로도 가능하지만 관리가 금방 복잡해집니다. GSAP에서는 각 요소의 움직임을 코드로 이어 붙일 수 있어 순서와 타이밍을 읽기 좋게 정리할 수 있습니다.
입문 단계에서 알아두면 좋은 용도
- 히어로 섹션의 제목, 설명, 버튼 등장 효과
- 카드 목록이 순서대로 나타나는 애니메이션
- 모달, 메뉴, 토스트 알림의 열림과 닫힘 효과
- 버튼이나 아이콘의 강조 애니메이션
- 여러 단계를 가진 랜딩 페이지 인터랙션
GSAP 시작하기
GSAP을 사용하는 방법은 크게 CDN 연결과 npm 설치로 나눌 수 있습니다. HTML, CSS, JavaScript를 한 파일이나 간단한 정적 페이지에서 연습한다면 CDN이 가장 빠릅니다. React, Vue, Vite 같은 개발 환경에서 프로젝트를 만들고 있다면 npm 설치가 자연스럽습니다.
CDN으로 빠르게 연결하기
가장 간단한 방법은 HTML 문서에 GSAP CDN 스크립트를 추가하는 것입니다. 아래처럼 body 끝부분에 GSAP을 먼저 불러오고, 그 아래에 직접 작성한 JavaScript 파일이나 script 코드를 넣으면 됩니다.
<div class="box">Box</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
gsap.to(".box", {
x: 200,
duration: 1
});
</script>이 코드는 class가 box인 요소를 오른쪽으로 200px 이동시킵니다. GSAP을 처음 확인할 때는 이렇게 하나의 박스를 움직이는 예제로 시작하는 것이 좋습니다. 화면에서 변화가 바로 보이기 때문에 문법과 결과를 연결해서 이해하기 쉽습니다.
npm 환경에서 설치하기
Vite나 Next.js처럼 번들러를 사용하는 프로젝트라면 npm으로 설치할 수 있습니다. 설치한 뒤 필요한 파일에서 gsap을 import해서 사용합니다.
npm install gsapimport { gsap } from "gsap";
gsap.to(".box", {
x: 200,
duration: 1
});초보 단계에서는 CDN과 npm 중 무엇이 더 좋은지 오래 고민할 필요가 없습니다. 단일 HTML 예제로 학습한다면 CDN, 실제 프론트엔드 프로젝트 안에서 사용한다면 npm을 선택하면 됩니다. 발행 전에는 공식 문서 기준으로 CDN 경로, npm 설치 명령, 번들러 환경의 import 예시가 최신 안내와 맞는지 한 번 확인하는 것이 안전합니다.
첫 번째 애니메이션 만들기
GSAP의 기본은 “어떤 요소를, 어떤 값으로, 얼마 동안 바꿀 것인가”입니다. 가장 많이 쓰는 메서드는 gsap.to()입니다. 이름 그대로 현재 상태에서 지정한 목표 상태로 이동합니다.
gsap.to() 기본 사용법
gsap.to(".box", {
x: 300,
opacity: 0.5,
duration: 1
});첫 번째 인자 “.box”는 움직일 대상을 의미합니다. CSS 선택자처럼 class, id, 태그 이름을 사용할 수 있습니다. 두 번째 인자는 애니메이션 설정 객체입니다. x는 가로 이동, opacity는 투명도, duration은 애니메이션이 진행되는 시간입니다. 위 코드는 box 요소를 오른쪽으로 300px 이동시키면서 투명도를 0.5로 바꿉니다.
duration, x, opacity 같은 기본 속성 이해
GSAP에서 x와 y는 transform의 translateX, translateY처럼 동작합니다. left나 top을 직접 바꾸는 것보다 transform 기반 이동이 일반적으로 애니메이션에 더 적합합니다. opacity는 0이면 보이지 않고 1이면 완전히 보입니다. duration은 초 단위이므로 duration: 1은 1초 동안 실행된다는 뜻입니다.
gsap.to(".title", {
y: -30,
opacity: 1,
duration: 0.8
});이 예제는 title 요소를 위로 30px 이동시키면서 보이게 만듭니다. 다만 gsap.to()는 현재 상태에서 목표 상태로 가는 방식이므로, 처음에 opacity가 이미 1이라면 투명도 변화는 보이지 않습니다. 그래서 등장 애니메이션을 만들 때는 CSS에서 초기 상태를 잡거나, 다음 섹션에서 다룰 gsap.from()을 사용하는 편이 더 직관적일 때가 많습니다.
from과 fromTo 이해하기
GSAP을 처음 배울 때 가장 많이 헷갈리는 부분이 to, from, fromTo의 차이입니다. 간단히 말하면 to는 현재 상태에서 목표 상태로 가고, from은 지정한 시작 상태에서 현재 상태로 돌아오며, fromTo는 시작 상태와 끝 상태를 모두 직접 지정합니다.
gsap.from()이 필요한 상황
화면에 요소가 자연스럽게 등장하는 효과를 만들고 싶다면 gsap.from()이 편합니다. 요소의 최종 모습은 CSS에 그대로 두고, “처음에는 어디에서 시작할지”만 GSAP에 알려주는 방식입니다.
gsap.from(".hero-title", {
y: 40,
opacity: 0,
duration: 0.8
});이 코드는 hero-title 요소가 처음에는 아래로 40px 내려가 있고 투명한 상태였던 것처럼 시작해서, 원래 CSS 위치와 opacity로 돌아오게 만듭니다. 제목 등장 효과를 만들 때 자주 쓰는 패턴입니다.
gsap.fromTo()로 시작값과 끝값 지정하기
시작 상태와 끝 상태를 모두 명확하게 정하고 싶다면 gsap.fromTo()를 사용합니다. 특히 요소의 현재 CSS 상태에 의존하고 싶지 않거나, 같은 애니메이션을 여러 상황에서 예측 가능하게 실행하고 싶을 때 유용합니다.
gsap.fromTo(".button",
{
scale: 0.8,
opacity: 0
},
{
scale: 1,
opacity: 1,
duration: 0.5
}
);첫 번째 객체는 시작값, 두 번째 객체는 끝값입니다. 위 코드는 버튼이 작고 투명한 상태에서 시작해 원래 크기와 완전한 불투명 상태로 나타나게 합니다. 실무에서는 모달 버튼, CTA 버튼, 알림 요소처럼 사용자의 시선을 잠깐 끌어야 하는 UI에 이런 방식이 자주 쓰입니다.
자주 쓰는 옵션 정리
GSAP은 속성 몇 개만 알아도 충분히 시작할 수 있습니다. 처음부터 모든 옵션을 외우려고 하기보다 duration, ease, delay, repeat, yoyo, stagger 정도를 먼저 익히면 대부분의 기본 예제를 만들 수 있습니다.
ease
ease는 움직임의 속도감을 정합니다. 같은 1초짜리 이동이라도 처음부터 끝까지 일정하게 움직이는 것과, 빠르게 출발했다가 천천히 멈추는 것은 느낌이 다릅니다.
gsap.to(".box", {
x: 250,
duration: 1,
ease: "power2.out"
});power2.out은 빠르게 움직이다가 끝에서 부드럽게 감속하는 느낌을 줍니다. UI 요소가 화면에 들어오거나 버튼이 강조될 때 자연스러운 인상을 만들기 좋습니다.
delay
delay는 애니메이션 시작 전 대기 시간입니다. 페이지가 열리자마자 바로 움직이기보다 짧게 기다린 뒤 실행하고 싶을 때 사용합니다.
gsap.from(".subtitle", {
y: 20,
opacity: 0,
duration: 0.6,
delay: 0.3
});repeat와 yoyo
repeat는 반복 횟수이고, yoyo는 애니메이션이 끝난 뒤 반대로 되돌아가게 할지 정하는 옵션입니다. 작은 강조 효과나 로딩 느낌을 만들 때 쓸 수 있지만, 본문이나 중요한 UI에 과하게 사용하면 산만해질 수 있습니다.
gsap.to(".badge", {
scale: 1.1,
duration: 0.4,
repeat: 3,
yoyo: true
});stagger
stagger는 여러 요소를 일정 간격으로 순차 실행할 때 사용합니다. 카드 목록, 메뉴 항목, 갤러리 이미지처럼 같은 class를 가진 요소가 여러 개 있을 때 특히 유용합니다.
gsap.from(".card", {
y: 30,
opacity: 0,
duration: 0.6,
stagger: 0.15
});이 코드는 모든 card 요소를 동시에 나타나게 하지 않고 0.15초 간격으로 하나씩 등장시킵니다. 랜딩 페이지의 기능 카드나 포트폴리오 목록에서 자주 볼 수 있는 효과입니다.
여러 애니메이션을 순서대로 실행하기
애니메이션이 하나뿐이라면 gsap.to()나 gsap.from()만으로 충분합니다. 하지만 제목이 먼저 나타나고, 설명 문장이 이어서 올라오고, 버튼이 마지막에 등장해야 한다면 순서 관리가 필요합니다. 이때 사용하는 것이 timeline입니다.
timeline 기본 구조
const tl = gsap.timeline();
tl.from(".hero-title", {
y: 40,
opacity: 0,
duration: 0.7
});
tl.from(".hero-text", {
y: 24,
opacity: 0,
duration: 0.6
});
tl.from(".hero-button", {
scale: 0.9,
opacity: 0,
duration: 0.4
});timeline에 애니메이션을 차례대로 추가하면 앞의 애니메이션이 끝난 뒤 다음 애니메이션이 실행됩니다. 위 예제는 제목, 설명, 버튼 순서로 등장합니다. 각 애니메이션에 delay를 일일이 계산해서 넣는 방식보다 읽기 쉽고 수정하기도 편합니다.
add, position parameter는 가볍게 소개
timeline은 기본적으로 순서대로 실행되지만, 경우에 따라 일부 애니메이션을 겹쳐 실행하고 싶을 수 있습니다. 이때 position parameter를 사용합니다. 처음에는 복잡한 문법까지 외우지 않아도 되지만, “<“를 사용하면 이전 애니메이션과 동시에 시작할 수 있다는 정도는 알아두면 좋습니다.
const tl = gsap.timeline();
tl.from(".title", {
y: 30,
opacity: 0,
duration: 0.7
});
tl.from(".image", {
scale: 0.95,
opacity: 0,
duration: 0.7
}, "<");이 코드는 title 애니메이션과 image 애니메이션을 같은 시점에 시작합니다. 나중에 더 복잡한 인터랙션을 만들게 되면 timeline의 position parameter를 자세히 다루게 되지만, 입문 단계에서는 순서대로 연결하는 기본 구조만 익혀도 충분합니다.
처음 사용할 때 자주 하는 실수와 연습 순서
GSAP을 처음 사용할 때 흔한 실수는 너무 많은 효과를 한 번에 넣는 것입니다. x, y, opacity, scale, rotate, repeat를 동시에 사용하면 코드가 화려해 보일 수는 있지만 어떤 속성이 화면 결과에 어떤 영향을 주는지 파악하기 어렵습니다. 처음에는 한 요소에 하나의 변화만 주고, 그다음 속성을 하나씩 추가하는 방식이 좋습니다.
또 다른 실수는 움직일 대상의 선택자를 잘못 쓰는 것입니다. “.box”는 class가 box인 요소를 찾고, “#box”는 id가 box인 요소를 찾습니다. HTML에는 class를 넣었는데 JavaScript에서는 id 선택자를 쓰면 애니메이션이 실행되지 않습니다. 코드가 맞아 보이는데 아무 일도 일어나지 않는다면 선택자부터 확인하는 습관을 들이는 것이 좋습니다.
- 1단계: 박스 하나를 x 방향으로 움직여 gsap.to()를 익힙니다.
- 2단계: 제목이 아래에서 나타나는 효과로 gsap.from()을 연습합니다.
- 3단계: 버튼의 시작값과 끝값을 직접 정하며 gsap.fromTo()를 사용합니다.
- 4단계: 카드 여러 개에 stagger를 적용해 순차 등장 효과를 만듭니다.
- 5단계: timeline으로 제목, 문장, 버튼 애니메이션을 순서대로 연결합니다.
연습할 때는 실제 UI에 가까운 작은 예제를 만드는 것이 좋습니다. 단순히 박스를 움직이는 것에서 끝내지 말고, 히어로 제목, CTA 버튼, 카드 목록처럼 웹 페이지에서 자주 보는 요소에 적용해보면 GSAP이 어디에 쓰이는지 빠르게 감이 잡힙니다.
GSAP의 핵심은 어려운 문법을 많이 외우는 데 있지 않습니다. 먼저 대상을 고르고, 시작 또는 끝 상태를 정하고, duration과 ease로 속도감을 조절하는 흐름을 익히는 것이 중요합니다. 그다음 여러 요소가 필요하면 stagger를 쓰고, 여러 애니메이션의 순서가 필요하면 timeline을 쓰면 됩니다. 이 순서만 잡히면 ScrollTrigger, 텍스트 애니메이션, React 연동 같은 다음 단계도 훨씬 자연스럽게 이어집니다.