[GSAP] GSAP 1 / GSAP 기본 (gsap, tween, timeline, Sequencing

GSAP (GreenSock Animation Platform)

• 정의 : 웹에서 애니메이션을 부드럽고 효율적으로 구현할 수 있는 자바스크립트 기반 애니메이션 라이브러리
• CSS 애니메이션이나 requestAnimationFrame을 직접 다루는 것보다 성능이 뛰어남
• 복잡한 애니메이션을 직관적으로 제어할 수 있음

---

GSAP의 특징

1. 성능 최적화
   • 초당 60fps 애니메이션 유지가 가능하도록 최적화되어 있음
   • 구형 브라우저와도 호환성이 좋아서 안정적으로 동작.
2. 다양한 애니메이션 제어
   • 위치, 크기, 회전, 색상, 투명도 등 거의 모든 CSS 속성을 제어할 수 있음
   • 숫자 값이 들어가는 속성은 전부 애니메이션화가 가능.
3. 정교한 타이밍 제어
   • delay, repeat, yoyo 같은 옵션으로 반복 애니메이션도 쉽게 작성할 수 있음
   • Timeline 기능을 활용하면 여러 애니메이션을 순차적으로 또는 동시에 제어할 수 있음
4. 유연한 API
   • gsap.to(), gsap.from(), gsap.fromTo() 같은 메서드로 직관적으로 애니메이션을 작성
5. 플러그인 지원
   • ScrollTrigger: 스크롤 기반 애니메이션
   • Draggable: 드래그 & 드롭 지원
   • MotionPath: 경로 따라 이동
   • TextPlugin: 텍스트 애니메이션 등
6. CSS보다 유리한 점
   • CSS 애니메이션보다 더 세밀한 컨트롤이 가능 (재생, 일시정지, 되감기, 속도 변경 등).
   • 조건부 애니메이션이나 동적 데이터 기반 애니메이션 구현에 강력함

---

GSAP을 쓰면 좋은 상황

• 스크롤과 연동된 인터랙티브한 애니메이션
• 배너, 모션 그래픽, 텍스트 애니메이션
• Canvas, SVG, WebGL 같은 복잡한 애니메이션 작업
• UI/UX에서 부드러운 전환 효과 구현

---

GSAP의 Tween과 Timeline

• GSAP 객체는 GSAP의 대부분 기능을 위한 액세스 포인트 역할을 함
• GSAP의 나머지 기능(ScrollTrigger, Flip, MotionPath, 등)은 전부 Tween/Timeline을 기반으로 동작

1.  Tween

• 정의: 대상(target)의 속성을 시간에 따라 한 번 변화시키는 단일 애니메이션 단위
• 타겟(애니메이션하려는 객체), 지속 시간, 그리고 애니메이팅하려는 속성을 입력한 다음, 트윈의 플레이헤드가 새로운 위치로 이동하면 해당 시점에서 속성 값이 무엇인지 파악하여 이를 적용
• CSS 속성, JS 객체 값, SVG 속성 등등을 시간 축에 맞춰 바꾸는 기본 애니메이션 함수 → 이게 바로 Tween.
• 그래서 가장 기본 개념은 "Tween = GSAP의 최소 단위"임.
• 포인트: 시작값 → 끝값(혹은 현재값 → 지정값)으로 이동하는 것

특징

• 한 번 실행하고 끝난다.
• 반복하려면 repeat 옵션을 줘야 한다.
• 개별 요소 애니메이션 만들 때 주로 사용

---

2. Timeline

• 정의: 여러 Tween을 순차적/동시적으로 조합할 수 있는 애니메이션 컨테이너(시간축)
• Timeline = Tween을 엮어서 큰 흐름을 만드는 도구
• 포인트: “애니메이션을 하나의 흐름”으로 다루며, 제어 가능 (play(), pause(), reverse() 등)

특징

• 여러 Tween을 한 줄기 흐름으로 다룬다.
• defaults 옵션을 주면 공통 duration, ease 등을 한 번에 적용 가능.
• addLabel(), seek(), progress() 같은 시간 제어가 가능.
• 복잡한 인터랙션에서 필수적

---

구분	Tween	Timeline
의미	단일 애니메이션	여러 Tween을 묶어 관리
제어	개별 애니메이션만 컨트롤	전체 흐름 제어 가능 (play, pause, reverse 등)
사용 시점	간단한 이동, 페이드 등 단일 효과	시퀀스, 스토리보드형 애니메이션
비유	“한 컷”	“편집된 영상 전체”

---