1. 기본 설치 및 환경 설정
GSAP (GreenSock Animation Platform)는 웹에서 가장 강력한 애니메이션 라이브러리 중 하나입니다. 사용을 시작하기 위해 CDN을 통해 라이브러리를 포함합니다.
1.1. CDN을 통한 GSAP 포함
HTML 문서의 <head> 또는 <body> 종료 태그 직전에 GSAP Core 라이브러리를 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
1.2. 기본 트윈 구조
GSAP의 기본 애니메이션 단위는 트윈입니다. 다음 코드는 ".box" 클래스를 가진 요소를 1초 동안 X축으로 100px 이동시키는 가장 기본적인 트윈입니다.
gsap.to(".box", { duration: 1, x: 100 });
주요 개념: gsap.to()는 요소를 현재 상태에서 지정된 상태로 애니메이션합니다. duration은 애니메이션 시간을 정의합니다.