기본 애니메이션: gsap.to(), gsap.from(), gsap.fromTo()

핵심 3대장: to(), from(), fromTo()

GSAP 애니메이션의 가장 기본이 되는 단위는 트윈(Tween)입니다. 트윈은 특정 요소의 속성(위치, 크기, 색상, 투명도 등)을 시작점(A)에서 도착점(B)으로 부드럽게 변화시킵니다.
복잡한 애니메이션도 결국 이 3가지 기본 메서드의 조합으로 만들어집니다.

[그림 1] 대상의 상태 변화 방향을 결정하는 3가지 기본 메서드

1. 변화의 흐름 (시각적 이해)

현재 CSS에 정의된 요소의 상태를 기준으로 애니메이션이 어떤 방향으로 흐르는지 비교해 보세요.

2. 트윈(Tween) 메서드 핵심 요약

상황에 따라 알맞은 메서드를 선택하여 애니메이션을 구성합니다.

메서드	방향 (흐름)	주요 사용처 및 특징
`gsap.to()`	현재 상태 ➔ 목표 상태	버튼 호버, 메뉴 열기 등 가장 기본적이고 많이 쓰이는 애니메이션입니다.
`gsap.from()`	임의의 상태 ➔ 현재 상태	요소가 투명도 0에서 1로 나타나거나, 화면 밖에서 날아오는 등장(Intro) 애니메이션에 매우 유용합니다.
`gsap.fromTo()`	시작 상태 ➔ 목표 상태	CSS에 정의된 원래 스타일을 완전히 무시하고 시작점과 끝점을 강제로 고정할 때 사용합니다. 반복 재생 시 오류가 적어 안정적입니다.

⚠️ 주의: CSS 속성 표기법

GSAP 객체 내부에 속성을 작성할 때는 자바스크립트 객체(Object) 문법을 따르므로, 케밥 케이스(background-color)가 아닌 카멜 케이스(backgroundColor)를 사용해야 합니다. 값에 단위(px, %)가 필요할 경우 반드시 따옴표(String)로 묶어주어야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <div class="demo-wrapper"> <div class="track"> <span class="label">to()</span> <div class="box box1"></div> </div> <div class="track"> <span class="label">from()</span> <div class="box box2"></div> </div> <div class="track"> <span class="label">fromTo()</span> <div class="box box3"></div> </div> <button id="playBtn" class="play-btn">애니메이션 재실행</button> </div>