GSAP 시작하기

GSAP

 

1. GSAP이란?

GSAP(GreenSock Animation Platform)에서 제공하는 javascript 애니메이션 라이브러리.

이곳에서 GSAP을 활용한 

https://gsap.com/showcase/page/4/

 

 

2. GSAP 기본 사용법

https://gsap.com/

Homepage | GSAP

gsap 홈페이지에서 npm, cdn 등의 방법으로 사용할 수 있다.

 

 

3. GSAP 기본 문법

1. gsap.to()

: 타겟 요소를 지정한 속성값까지.

gsap.to('타겟', {속성:속성값});

 

See the Pen gsap to by seuliing (@seuliing) on CodePen.

 

 

2. gsap.from()

: gsap.to와 반대로 지정한 속성값으로부터 원래대로 돌아오는 애니메이션.

gsap.from('타겟', {속성:속성값});

See the Pen gsap from by seuliing (@seuliing) on CodePen.

 

3. gsap.fromTo()

: 시작 속성과 끝나는 속성 모두 지정

gsap.fromTo('타겟',
  {시작속성: 시작속성값},
  {종료속성: 종료속성값}
);

See the Pen gsap fromTo by seuliing (@seuliing) on CodePen.

 

 

4. stagger

: 각 객체의 애니메이션 사이에 약간의 딜레이 추가

See the Pen gsap stagger by seuliing (@seuliing) on CodePen.

 

 

5. Timeline

: 애니메이션의 종료 시점을 파악하여 종료된 후 다음 애니메이션을 재생하는 복잡한 시퀀스를 하나로 간단하게 묶을 수 있음.

See the Pen Untitled by seuliing (@seuliing) on CodePen.