Javascript 애니메이션 라이브러리 : GSAP

GSAP 라이브러리

---

Javascript는 transform 애니메이션이 먹히지 않는다.

그래서 요소의 다양한 애니메이션 효과를 위해서 여러 애니메이션이 있는데,

패캠에서 한 번 사용해 본 GSAP을 사용하기 위해 사용법을 차근차근 업데이트해보려고 한다.

 

 

Step 1

연결하기

파일 다운로드, CDN, NPM, GitHub, CodePen 으로 연결이 가능하다.

CDN이 빠르고 간단해서 CDN으로 연결했다.

 

 

Step 2

필요한 애니메이션 코드 사용하기

리스트를 보고 필요한 코드를 사용하면 끝!

(코드에 대한 자세한 정리는 아래에)

 

https://greensock.com/docs/v3/GSAP

Docs

 

 

GSAP 애니메이션 종류와 문법

---

기본 문법

gsap.메서드("요소", {옵션명:옵션값, 옵션명:옵션값});

 

gsap.to()

상태 변경 애니메이션

 

설명:

요소가 A 상태에서 B 상태로 자연스럽게 변경된다.

예시: 

gsap.to(".box", {x : 300, y : 300});

 

 

gsap.set()

상태 변경 애니메이션 없이

 

설명:

요소가 A 상태에서 B 상태로 눈 깜짝 변경된다.

예시: 

gsap.to(".box", {x : 300, y : 300});

 

 

 

***사용할 수 있는 옵션의 종류가 정리되어 있는 페이지는 어디 있을까?***

 

 

 

 

 

https://greensock.com/

GreenSock