영화 감독처럼 모션 연결하기: 타임라인(gsap.timeline()) 기초
🎬 복잡한 시퀀스를 우아하게 엮어내는 타임라인
애니메이션 A가 끝나고 애니메이션 B가 시작되고, 다시 C가 시작되게 하려면 delay를 일일이 계산해야 할까요? 타임라인(Timeline)을 사용하면 이 과정이 매우 직관적이고 쉬워집니다.
const tl = gsap.timeline()으로 타임라인 객체를 생성한 후, tl.to().to() 형태로 메서드를 체이닝(Chaining)하면 코드 순서대로 애니메이션이 꼬리에 꼬리를 물고 실행됩니다.
<style>
.box { width: 80px; height: 80px; background: #ec4899; margin: 5px; opacity: 0;}
</style>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
// 타임라인 생성
const tl = gsap.timeline();
// 작성한 순서대로 순차 실행됩니다! delay 계산이 필요 없습니다.
tl.to('.box1', { x: 100, opacity: 1, duration: 1 })
.to('.box2', { x: 100, opacity: 1, duration: 1 })
.to('.box3', { x: 100, opacity: 1, duration: 1 });
</script>