gsap.timeline()

gsap.timeline() 메서드는 연속적인 애니메이션을 설정합니다. gsap.to()와 delay 속성을 이용하면, 연속적인 애니메이션이 가능하지만, gsap.timeline()이용하면 연속적인 애니메이션을 간편하게 설정 할 수 있습니다.

gsap.timeline()

gsap.timeline() 메서드는 연속적인 애니메이션을 설정합니다.

특징	설명
버전	GSAP3
결과값(return)	타임라인(Timeline)
사용성	★★★★★

문법(Syntax)

gsap.timeline("타겟", {속성: 속성값, ....});

//일반적인 애니메이션 연속 작업
gsap.to("#id", {x: 50, duration: 1});
gsap.to("#id", {x: 150, duration: 1, delay: 1});      //1초 후에 애니메이션 작동
gsap.to("#id", {x: 100, duration: 1, delay: 2});      //2초 후에 애니메이션 작동

//타임라인을 이용한 애니메이션 연속 작업
const tl = gsap.timeline();
tl.to("#id", {x: 50, duration: 1});
tl.to("#id", {x: 150, duration: 1});
tl.to("#id", {x: 100, duration: 1});

타겟(targets) : 애니메이션을 적용할 개체를 선택합니다. (CSS 선택자, Javascript 선택자 가능)
속성(values) : 애니메이션과 관련된 속성을 설정합니다.

속성(Property)

속성값	설명
autoRemoveChildren	true이면 자식 애니메이션이 정지되거나 제거됩니다.
callbackScope	콜백함수를 설정합니다. (onStart, onUpdate, onComplete, etc)
delay	애니메이션이 시작되기 전 시간을 설정합니다.
onComplete	애니메이션이 완료 되었을 때 함수를 호출합니다.
onCompleteParams	onComplete 함수를 전달할 매개 변수를 설정합니다.
onRepeat	애니메이션을 반복 할 때 함수를 호출합니다. 반복을 설정한 경우에 발생합니다.
onRepeatParams	onRepeat 함수를 전달할 매개 변수를 설정합니다.
onReverseComplete	애니메이션이 역방향에서 다시 시작점에 도달했을 때 함수를 호출합니다.
onReverseCompleteParams	onReverseComplete 함수를 전달할 매개 변수를 설정합니다.
onStart	애니메이션이 시작할 때 함수를 호출합니다.
onStartParams	onStart 함수를 전달할 매개 변수를 설정합니다.
onUpdate	애니메이션이 업데이트 될 때마다 함수를 호출합니다.
onUpdateParams	onUpdate 함수를 전달할 매개 변수를 설정합니다.
paused	true이면 애니메이션이 일시 중지됩니다. 기본값은 false
repeat	애니메이션 반복 횟수를 설정합니다. repeat: 1은 총 2번을 반복하게 됩니다. 기본값은 0
repeatDelay	애니메이션 반복 사이의 대기 시간을 설정합니다. 기본값은 0
repeatRefresh	repeatRefresh: true를 설정하면 반복 애니메이션이 무효화됩니다. 이것은 랜덤값을 설정할 때 유용합니다.
smoothChildTiming	애니메이션의 부드러움을 유지하기 위한 설정입니다.
yoyo	true이면, 애니메이션을 반복적으로 실행하여, 앞뒤로 이동하는 것처럼 보입니다.