Post

gsap 두번째 정리

Posted
Preview Image
By sunhew 7 min read

GSAP

GSAP (GreenSock Animation Platform) 은 웹 애니메이션을 위한 매우 강력하고 유연한 자바스크립트 라이브러리입니다. ScrollTrigger 플러그인은 스크롤에 따라 애니메이션을 트리거하는 기능을 제공하며, 이는 웹사이트의 인터랙티브한 요소를 구현할 때 특히 유용합니다.

gsap의 두번째 정리.

gsap 정리 목록

  • onEnter
  • onEnterBack
  • onLeave

  • onLeaveBack

  • play()
  • pause()
  • resume()
  • reset()
  • restart()
  • complete()

  • reverse()

  • to, from
  • toggleActions
  • start, end
  • scrub
  • pin
  • toggleClass
  • callback
  • snap

GSAP의 play()

GSAP의 play() 메서드는 애니메이션을 재생하는 데 사용됩니다.

play() 메서드의 기능

자기 자신 반환
  • play() 메서드는 자기 자신을 반환하므로, 메서드 체이닝을 통해 다른 메서드를 연결할 수 있습니다.
재생 시작
  • play() 메서드는 애니메이션을 재생하기 시작합니다. 선택적으로 특정 시간부터 재생을 시작할 수 있습니다.

GSAP의 주요 제어 메서드

GSAP에는 애니메이션을 제어하는 다양한 메서드가 있습니다. 이러한 메서드에는 다음과 같은 것들이 포함됩니다

코드설명
pause()애니메이션을 일시 중지합니다.
resume()일시 중지된 애니메이션을 재개합니다.
reverse()애니메이션을 역방향으로 재생합니다.
restart()애니메이션을 처음부터 다시 시작합니다.
seek(time)애니메이션을 특정 시간으로 이동시킵니다.
progress(value)애니메이션의 진행 상황을 설정합니다.

GSAP의 reset()

GSAP의 reset() 메서드는 애니메이션의 상태를 초기 상태로 되돌리는 데 사용됩니다. 이를 통해 애니메이션을 처음부터 다시 실행할 수 있으며, 특정 속성만 재설정할 수도 있습니다. reset() 메서드와 restart() 메서드를 함께 사용하면 애니메이션을 완전히 초기화할 수 있습니다.

주요 특징

초기 상태 복원
  • reset() 메서드를 사용하면 애니메이션의 모든 속성이 초기 값으로 복원됩니다. 이를 통해 애니메이션을 처음부터 다시 실행할 수 있습니다.
타임라인 초기화
  • eset() 메서드는 타임라인의 시간을 0으로 되돌리고 모든 속성을 초기 상태로 재설정합니다.
특정 속성 재설정
  • reset() 메서드에 매개변수를 전달하면 특정 속성만 초기 값으로 재설정할 수 있습니다.
재생 상태 유지
  • reset() 메서드를 사용해도 애니메이션의 재생 상태는 유지됩니다. 즉, 일시 중지된 상태라면 재생 상태가 유지됩니다.
restart() 메서드와 함께 사용
  • reset() 메서드와 restart() 메서드를 함께 사용하면 애니메이션을 처음부터 다시 실행할 수 있습니다.

globalTimeline

GSAP에는 globalTimeline이라는 개념이 있습니다. globalTimeline은 모든 GSAP 애니메이션이 공유하는 기본 타임라인입니다. 이 타임라인을 사용하면 모든 애니메이션을 한 곳에서 제어할 수 있습니다.

globalTimeline을 사용하면 애니메이션을 전역적으로 제어할 수 있습니다. 예를 들어 globalTimeline.pause()를 호출하면 모든 애니메이션이 일시 중지되고, globalTimeline.restart()를 호출하면 모든 애니메이션이 다시 시작됩니다.

따라서 GSAP의 reset() 메서드와 globalTimeline을 함께 사용하면 애니메이션 전체를 초기화하고 제어할 수 있습니다.

GSAP의 complete()

GSAP의 complete() 메서드는 애니메이션이 완료되었을 때 실행되는 콜백 함수입니다. 이를 통해 애니메이션이 끝났을 때 추가 작업을 수행할 수 있습니다. GSAP 3부터는 complete() 메서드가 Promise를 반환하므로 async/await 문법을 사용하여 애니메이션 완료 시점을 처리할 수 있습니다.

주요 특징

애니메이션 완료 시 실행
  • complete() 메서드는 애니메이션이 완료되었을 때 호출됩니다. 이를 통해 애니메이션이 끝났을 때 추가 작업을 수행할 수 있습니다.
콜백 함수 사용
  • complete() 메서드에 콜백 함수를 전달하면 애니메이션이 완료되었을 때 해당 함수가 실행됩니다.
this 키워드 사용
  • complete() 메서드의 콜백 함수 내에서 this 키워드를 사용하면 현재 Tween 또는 Timeline 객체에 접근할 수 있습니다.
Promise 반환
  • GSAP 3부터는 complete() 메서드가 Promise를 반환합니다. 이를 통해 async/await 문법을 사용하여 애니메이션 완료 시점을 처리할 수 있습니다.
onComplete() 메서드와 유사
  • complete() 메서드는 onComplete() 메서드와 유사한 기능을 제공합니다. 다만 onComplete()는 Tween 또는 Timeline 객체에 직접 추가해야 하는 반면, complete()는 메서드 체이닝 방식으로 사용할 수 있습니다.
gsap
gsap
This post is licensed under CC BY 4.0 by the author.