타임라인 전역 제어 (timeScale 속도 조절, Reverse 역재생)

⏪ 타임라인 통째로 조종하기

타임라인으로 수십 개의 애니메이션을 묶어두면, 그 덩어리 전체를 하나의 비디오테이프처럼 다룰 수 있습니다.

전체 속도를 2배속, 0.5배속으로 조절하는 timeScale(), 전체 애니메이션을 거꾸로 되감는 reverse() 기능은 복잡한 트랜지션 효과를 만들 때 코드를 절반으로 줄여줍니다.

<style>
.circle { width: 50px; height: 50px; background: #f59e0b; border-radius: 50%; display: inline-block; }
</style>
<button id="btn-fast">2배속 Play</button>
<button id="btn-reverse">Reverse (되감기)</button>
<div style="margin-top:20px;">
  <div class="circle"></div><div class="circle"></div><div class="circle"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });

// 3개의 동그라미가 차례대로 커지는 타임라인
tl.to('.circle', { scale: 1.5, y: 30, duration: 1, stagger: 0.3 });

document.querySelector('#btn-fast').onclick = () => {
  tl.timeScale(2).play(); // 2배 빠르게 재생
};
document.querySelector('#btn-reverse').onclick = () => {
  tl.timeScale(1).reverse(); // 정상 속도로 거꾸로 되감기
};
</script>

실행 결과