2. 핵심 메소드: .to(), .from(), .fromTo()
GSAP의 세 가지 주요 트윈 메소드를 이해하는 것은 모든 애니메이션의 기초입니다. 각각 시작점, 끝점, 또는 둘 다를 제어합니다.
2.1. gsap.to() (현재 상태 → 최종 상태)
가장 일반적인 메소드로, 요소의 현재 상태에서 지정된 최종 상태로 애니메이션합니다.
gsap.to(".item-a", { duration: 1, y: 50, opacity: 0.5 });
// item-a를 현재 위치에서 Y축으로 50px 아래로 이동하고 투명도를 0.5로 만듭니다.
2.2. gsap.from() (초기 상태 → 현재 상태)
요소의 최종(현재) 상태를 기반으로 초기 상태를 지정하고, 거기서부터 현재 상태로 애니메이션합니다. 로딩 시 애니메이션에 유용합니다.
gsap.from(".item-b", { duration: 1.5, scale: 0, rotation: 360 });
// item-b를 크기가 0이고 360도 회전된 상태에서 시작하여 최종(현재) 상태로 만듭니다.
2.3. gsap.fromTo() (초기 상태 → 최종 상태)
시작점과 끝점을 모두 명시적으로 제어하여, 애니메이션이 시작되기 전에 요소의 원래 CSS 상태를 변경하는 것을 방지합니다.
gsap.fromTo(".item-c",
{ x: -100 }, // From (시작 상태)
{ duration: 1, x: 100 } // To (최종 상태)
);
// item-c를 X축 -100px에서 X축 100px로 이동시킵니다.