애니메이션 타이밍과 이징 (Duration, Delay, Ease 설정)

시간과 움직임의 질감 (Timing & Easing)

같은 A에서 B로의 이동이더라도, 어떤 가속도로, 언제 출발해서, 얼마나 오래 걸리는지에 따라 애니메이션의 퀄리티와 느낌이 하늘과 땅 차이로 달라집니다.
GSAP는 매우 세밀하고 직관적인 시간 제어 속성(duration, delay)과 물리 법칙 기반의 다채로운 가속도 곡선(ease)을 제공합니다.

[그림 1] 가속도 곡선에 따라 애니메이션의 물리적 타격감과 질감이 다르게 표현됩니다.

1. 이징(Ease) 곡선의 시각적 이해

X축은 시간(Time), Y축은 애니메이션의 진행도(Progress)를 나타냅니다.

2. 타이밍 제어 핵심 속성

트윈 객체의 두 번째 인자(Options) 안에서 설정합니다.

속성명	단위/타입	설명 및 기본값
`duration`	초 (Number)	애니메이션이 재생되는 총 시간입니다. 명시하지 않으면 기본값인 0.5초가 적용됩니다.
`delay`	초 (Number)	애니메이션이 시작하기 전까지 대기하는 시간입니다. 여러 요소가 순차적으로 나타날 때 유용합니다.
`ease`	문자열 (String)	가속도 질감 함수입니다. 기본값은 `"power1.out"`이며, 끝날 때 자연스럽게 감속합니다. `"bounce.out"`, `"elastic.out"` 등 매우 다양합니다.

<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">none</span> <div class="ball ball-linear"></div> </div> <div class="track"> <span class="label">bounce</span> <div class="ball ball-bounce"></div> </div> <div class="track"> <span class="label">elastic</span> <div class="ball ball-elastic"></div> </div> <button id="playBtn" class="play-btn">타이밍 비교 실행 (▶)</button> </div>