본문 바로가기

Webstoryboy

Category

Explanation

GSAP/Alphabet

gsap.timeline()

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이면, 애니메이션을 반복적으로 실행하여, 앞뒤로 이동하는 것처럼 보입니다.

정의(Definition)

  • gsap.timeline() 메서드는 연속적인 애니메이션을 설정합니다.
  • gsap.timeline() 메서드는 전체적인 애니메이션을 간단하게 제어하고 타이밍을 정확하게 관리 할 수 있습니다.

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
gsap.from()

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기