스킬 자체의 표현으로
gsap.timeline()으로 애니메이션을 시퀀싱하는 공식 GSAP 스킬입니다. 타임라인을 생성하고, 기본적으로 순서대로 추가되는 트윈을 연결한 다음, position 파라미터로 위치를 재조정하는 방법을 다룹니다 — 절대 초 단위, 상대 오프셋("+=0.5"/"-=0.2"), 레이블, 그리고 "<"/">" 배치입니다.
타임라인 생성자 옵션(paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), addLabel()을 이용한 레이블링과 play()/tweenFromTo()를 이용한 탐색, 마스터 타임라인에 자식 타임라인을 중첩하는 방법, 그리고 restart, time, progress, kill을 포함한 재생 메서드를 설명합니다. 마지막으로 GSAP 모범 사례와 피해야 할 함정을 다루는데, 특히 delay를 사용한 체이닝과 타임라인 내부의 트윈에 ScrollTrigger를 적용하는 것에 주의해야 합니다.
산출물
- 변수에 저장된 타임라인 객체로, 모든 예제에서 tl로 표기되며 연결된 트윈이 추가되고 재생 메서드가 작동하는 대상입니다.
- tweenFromTo가 반환하는 새 트윈으로, 타임라인이 일시정지된 상태에서 이즈 없이 두 레이블 사이를 재생 위치를 애니메이션합니다.
- 종료된 타임라인: kill()을 호출하면 타임라인이 제거되며, 기본적으로 그 자식들도 함께 제거됩니다.
작동 방식
- 01타임라인 생성 및 트윈 연결
gsap.timeline()을 호출하고 .to() 호출을 연결하십시오. 위치를 지정하지 않으면 각 트윈은 이전 트윈이 끝난 후에 추가되므로, 작성한 순서가 곧 재생 순서가 됩니다.
- 02각 트윈을 시간상에 배치하기
배치는 세 번째 인자나 vars의 position 속성으로 설정됩니다: 절대 초 단위, 상대 오프셋, 레이블 이름, 또는 가장 최근에 추가된 애니메이션을 기준으로 한 < 및 >입니다.
- 03타임라인에 공유 기본값 부여하기
타임라인 생성자에 전달된 기본값은 모든 자식 트윈에 병합되므로, duration과 ease를 전체 시퀀스에 대해 한 번만 선언하면 됩니다.
- 04주요 지점에 레이블 지정하기
addLabel()은 타임라인 내 특정 시점에 이름을 붙이며, 이후 트윈은 숫자 대신 이 레이블을 위치 타겟으로 사용할 수 있습니다.
- 05마스터 타임라인 안에 타임라인 중첩하기
마스터 타임라인은 자식 타임라인을 하나의 단위로 받아 특정 시점에 배치할 수 있으며, 이후 트윈은 이를 기준으로 상대적으로 추가됩니다.
- 06전체 시퀀스를 한 번에 제어하기
타임라인이 구성되면 트윈 단위가 아니라 하나의 단위로 재생 및 일시정지됩니다.