minstudio

GSAP 시작하기 (CDN, NPM 설치 및 핵심 객체 이해)

✨ 모던 웹 애니메이션의 표준, GSAP

GSAP(GreenSock Animation Platform)은 자바스크립트로 웹에서 구현할 수 있는 거의 모든 애니메이션을 제어할 수 있는 초고성능 라이브러리입니다. 바닐라 JS, React, Vue 등 어떤 환경에서도 사용 가능하며, CSS 애니메이션보다 세밀한 제어와 타임라인 체이닝이 가능합니다.

GSAP Core Object Ecosystem

[그림 1] DOM 요소를 강력하게 제어하는 전역 gsap 객체와 트윈, 타임라인, 플러그인 생태계

🚀 설치 방법

1. CDN을 통한 설치

가장 빠르고 간편하게 시작하는 방법입니다. HTML 파일의 <head> 혹은 <body> 하단에 아래 스크립트 태그를 추가하면 즉시 사용할 수 있습니다.

HTML
<!-- CDN을 통한 설치 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
2. NPM 모듈 패키지 매니저 환경 (React, Vue, Next.js 등)

현업 프론트엔드 개발 환경에서는 패키지 매니저를 통해 설치한 뒤 import gsap from 'gsap' 형태로 불러옵니다.

BASH / TERMINAL
# NPM 사용 시
$npm install gsap
# Yarn 사용 시
$yarn add gsap
# PNPM 사용 시
$pnpm add gsap
JAVASCRIPT
// 설치한 gsap 모듈 불러오기
import { gsap } from 'gsap';
// 기본 사용 예시
gsap.to('.box', { x: 100, duration: 1 });

가장 핵심이 되는 객체는 gsap 객체이며, 이 객체의 메서드들을 호출하여 요소를 애니메이션시킵니다.

GSAP 시작하기 (CDN, NPM 설치 및 핵심 객체 이해) | Minstudio