타임라인 전역 제어

타임라인 전역 제어: 속도 조절과 역재생

타임라인 안에 수십 개의 복잡한 트윈(Tween)을 연결해 두었다면, 그 덩어리 전체를 하나의 비디오테이프처럼 쉽게 다룰 수 있습니다.
애니메이션 전체의 재생 속도를 2배속, 0.5배속으로 조절하는 timeScale()과, 현재 진행 상황을 거꾸로 되감는 reverse() 기능은 인터랙티브한 UI를 구성할 때 코드를 획기적으로 줄여주는 GSAP 타임라인만의 핵심 무기입니다.

[그림 1] 마스터 타임라인을 통해 하위 시퀀스를 일괄 제어하는 개념

1. 타임라인 글로벌 제어 메서드

타임라인 객체 하나만 조작하면 내부의 모든 애니메이션이 함께 영향을 받습니다.

메서드	설명 및 동작 방식
`tl.timeScale(multiplier)`	타임라인의 재생 속도를 배수로 조절합니다. `1`은 정상, `2`는 두 배 빠름, `0.5`는 절반 속도(슬로우 모션)입니다.
`tl.reverse()`	현재 시점에서부터 애니메이션을 거꾸로 역재생합니다. 모달 창이나 메뉴를 닫을 때 닫기 애니메이션을 따로 만들 필요 없이 유용합니다.
`tl.progress(value)`	애니메이션의 진행도를 `0`(시작)에서 `1`(끝) 사이의 값으로 강제 세팅합니다.

2. 시각적 원리: 시간 축(TimeScale)의 변화

💡 팁: 메서드 체이닝

메서드를 체이닝하여 tl.timeScale(2).play() 처럼 작성하면 코드가 매우 간결해집니다. 역재생을 할 때는 역재생 속도도 timeScale의 영향을 받으므로, 정상 속도로 되감고 싶다면 항상 tl.timeScale(1).reverse()를 습관화하는 것이 좋습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <div class="master-wrapper"> <div class="controls"> <button id="btn-play" class="btn play">▶ 기본 재생</button> <button id="btn-fast" class="btn fast">⏩ 2배속 재생</button> <button id="btn-slow" class="btn slow">🐢 0.5배속 재생</button> <button id="btn-reverse" class="btn reverse">⏪ 역재생 (되감기)</button> </div> <div class="track"> <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> </div> </div>

메서드

설명 및 동작 방식

tl.timeScale(multiplier)

타임라인의 재생 속도를 배수로 조절합니다. 1은 정상, 2는 두 배 빠름, 0.5는 절반 속도(슬로우 모션)입니다.

tl.reverse()

현재 시점에서부터 애니메이션을 거꾸로 역재생합니다. 모달 창이나 메뉴를 닫을 때 닫기 애니메이션을 따로 만들 필요 없이 유용합니다.

tl.progress(value)

애니메이션의 진행도를 0(시작)에서 1(끝) 사이의 값으로 강제 세팅합니다.