기본 메서드 (to, from)
핵심 3대장: to(), from(), fromTo()
GSAP 애니메이션의 가장 기본이 되는 단위는 트윈(Tween)입니다. 트윈은 특정 요소의 속성(위치, 크기, 색상, 투명도 등)을 시작점(A)에서 도착점(B)으로 부드럽게 변화시킵니다.
복잡한 애니메이션도 결국 이 3가지 기본 메서드의 조합으로 만들어집니다.
복잡한 애니메이션도 결국 이 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)로 묶어주어야 합니다.
3. 트윈(Tween) 메서드의 기본 인자(Arguments)
트윈 메서드는 보통 (대상, {속성들}) 형태로 작성됩니다.
gsap.to(".box", { x: 100, duration: 1, ease: "power2.out" });
- 첫 번째 인자 (".box"): 애니메이션을 적용할 대상입니다. CSS 선택자 문자열을 쓰거나, DOM 요소 객체를 직접 넣어도 됩니다.
- 두 번째 인자 ({...}): 어떤 속성을 어떻게 변화시킬지 정의하는 객체(Vars Object)입니다.
x, y, rotation, scale, opacity, backgroundColor등 CSS 관련 속성의 목표값을 지정합니다.duration: 애니메이션 진행 시간 (기본값: 0.5초)delay: 시작하기 전 대기 시간 (예: 1을 넣으면 1초 뒤 시작)ease: 가속 및 감속 등 움직임의 느낌을 문자열로 지정합니다.onComplete: 애니메이션이 완전히 끝난 후 실행할 콜백 함수를 지정합니다.
💡 gsap.fromTo의 경우 인자가 3개입니다: (".box", {시작 상태 속성들}, {도착 상태 속성들 + duration 등})
4. ease (애니메이션 가감속) 옵션 총정리
ease 옵션은 애니메이션의 생동감을 결정하는 가장 중요한 요소입니다.
자연스러운 가감속 (Power 시리즈)
"none"/"linear": 일정한 속도 (로딩바)"power1": 살짝 부드러움"power2": 적당히 부드러움 (가장 많이 씀)"power3": 강한 가감속"power4": 매우 극적인 가감속
재미있고 튀는 효과
"back": 목표 지점을 살짝 지나쳤다가 되돌아옴 (탄성 느낌)"elastic": 고무줄처럼 띠용띠용 여러 번 튕김"bounce": 공이 바닥에 떨어져 통통 튀기는 느낌
수학적/기계적 곡선
"circ": 둥근 궤적 (물방울 느낌)"expo": 급격한 가속/감속"sine": 사인 곡선 기반의 매우 부드러운 움직임
💡 in / out / inOut 꼬리표 붙이기
모든 이징의 뒤에는 시점을 결정하는 꼬리표를 붙일 수 있습니다. (예: "power2.out")
- .in : 천천히 시작해서 끝날 때 빠르게 가속
- .out (기본값) : 빠르게 시작해서 끝날 때 천천히 감속 (UI에서 자연스러움)
- .inOut : 천천히 시작 → 빨라짐 → 천천히 멈춤