3. Timeline 사용 및 시퀀스 관리
Timeline은 여러 개의 트윈을 하나로 묶어 부모처럼 제어할 수 있게 해주는 GSAP의 강력한 기능입니다. 복잡한 시퀀스를 쉽게 관리할 수 있습니다.
3.1. 기본 Timeline 생성 및 사용
Timeline을 생성하고 트윈을 체이닝(Chaining)하여 순서대로 실행되도록 합니다.
const tl = gsap.timeline({ defaults: { ease: "power1.out" } });
tl.to(".step-1", { duration: 0.5, opacity: 0, y: -20 }) // 1. 먼저 실행
.from(".step-2", { duration: 1, scale: 0, stagger: 0.2 }) // 2. 순서대로 실행
.to(".step-3", { duration: 0.8, x: 50 }, "+=0.5"); // 3. 2번 트윈 종료 0.5초 후 시작
3.2. 포지션 파라미터를 사용한 정밀 제어
Timeline의 세 번째 인수인 포지션 파라미터를 사용하면 트윈이 언제 시작할지 정확하게 지정할 수 있습니다.
>: 이전 트윈이 종료된 직후 시작합니다. (기본값)<: 이전 트윈이 시작된 지점에서 함께 시작합니다. (겹치기)+=1: 이전 트윈이 종료된 후 1초 후에 시작합니다. (딜레이)-=0.5: 이전 트윈이 종료되기 0.5초 전에 시작합니다. (오버랩)"labelName": 타임라인의 특정 라벨 지점에서 시작합니다.