[GSAP] 기본 사용법

KJA·2023년 12월 17일
0

1. setting

공식 사이트에서 받거나 CDN, 혹은 npm install gsap으로 설치할 수 있습니다.

공식 사이트
https://gsap.com/docs/v3/Installation/

gsap.to()

타겟 엘리먼트의 끝 값을 지정하는 가장 기본적인 메서드로 애니메이션 시작 후 종료되는 값을 지정해주는 메서드입니다.




gsap.from()

to()메서드와는 반대로 시작점을 지정할 수 있습니다. 즉 어떤상태에서 시작할지 선언을 해줍니다. 기본 문법도 to()와 비슷합니다.


이미 x축으로 500px 이동이 되어있는 상태에서 시작하고 2초 후 원래의 박스 형태로 종료됩니다.


gsap.fromto()

타겟 엘리먼트의 시작과 끝을 함께 지정해주는 메서드입니다. 시작 속성에는 ease, duration, delay, onComplete를 사용하지 못합니다.




gsap.set()

타겟 엘리먼트의 속성 값을 미리 설정합니다.





gsap.timeline()

연속적인 애니메이션을 설정합니다.


0개의 댓글