타임라인 기초
영화 감독처럼 모션 연결하기: 타임라인 기초
애니메이션 A가 끝나고 B가 시작되며, 다시 C가 이어지게 만들려면
타임라인(Timeline)을 사용하면 이 과정이 매우 직관적이고 쉬워집니다. 타임라인 객체를 생성한 후 메서드를 꼬리에 꼬리를 무는 방식(Chaining)으로 연결하면, 코드 작성 순서대로 완벽하게 연계되는 시퀀스 애니메이션을 완성할 수 있습니다.
delay 속성을 일일이 계산해야 할까요?타임라인(Timeline)을 사용하면 이 과정이 매우 직관적이고 쉬워집니다. 타임라인 객체를 생성한 후 메서드를 꼬리에 꼬리를 무는 방식(Chaining)으로 연결하면, 코드 작성 순서대로 완벽하게 연계되는 시퀀스 애니메이션을 완성할 수 있습니다.
[그림 1] 순차적으로 이어지는 타임라인의 시각적 메타포
1. 타임라인 도입 전/후 비교
왜 타임라인을 써야 할까요? 타임라인이 없을 때의 고통(수동 계산)과 있을 때의 편안함을 비교해 보세요.
2. 타임라인(Timeline) 주요 메서드
타임라인 객체는 기본 트윈(Tween)과 동일하게 to(), from()을 지원하며, 전체 흐름을 일괄 제어할 수 있습니다.
| 메서드 | 설명 |
|---|---|
gsap.timeline() |
빈 타임라인 객체를 생성합니다. 여기에 애니메이션을 줄줄이 붙일 수 있습니다. |
tl.to() / tl.from() |
타임라인에 요소를 추가합니다. 코드가 체이닝된 순서대로 차례대로 실행됩니다. |
tl.pause() / tl.play() |
타임라인에 연결된 모든 애니메이션 시퀀스를 통째로 정지하거나 재생합니다. |
⚠️ 주의: gsap.to() vs tl.to() 혼동 주의!
타임라인을 기껏 생성(const tl = gsap.timeline();)해놓고, 정작 애니메이션을 작성할 때 gsap.to()를 사용하면 타임라인에 등록되지 않아 개별적으로 즉시 동시 실행되어 버립니다. 타임라인에 엮을 때는 반드시 tl.to() 처럼 타임라인 변수명에 체이닝해야 함을 잊지 마세요!