GSAP 알아보기

GSAP 알아보기

CSS 애니메이션을 쉽게 작성할 수 있는 GSAP에 대해 알아봅시다!

GSAP란?

GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 복잡한 애니메이션을 구현하려면, CSS나 일반적인 자바스크립트로 작성으로는 너무 복잡하고 한계가 느껴지기 마련입니다. 이런 상황에서 보다 쉽게 애니메이션을 만들 수 있도록 만들어주는 도구가 바로 GSAP입니다.

GSAP 공식 사이트 방문하기

GSAP 사용하기

* 1. gsap cdn 연결하기 *
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>

* 2. gsap.to() 작성하기 *
gsap.to("대상", { 속성1, 속성2, 속성3, … });

* gsap.to의 주요 속성과 예시 *
x : x축으로 해당 값만큼 이동 ( x: 200 )
y : y축으로 해당 값만큼 이동 ( y: 200 )
rotate : 대상을 회전(°) ( rotate: 720 )
opacity : 대상의 투명도를 설정 ( opacity: 0.2 )
scale : 대상의 크기를 설정(배) ( scale: 1.3 )
duration : 애니메이션의 작동 시간(초)을 설정 ( duration: 3 )
delay : 애니메이션의 지연 시간(초)을 설정 ( delay: 2 )

등… css의 transform 속성과 비슷한 속성들이 있습니다.

GSAP의 더 자세한 사용법

GSAP의 장점과 단점

* 장점 *
1. 컴퓨터의 메모리를 사용 ⇒ 빠르다
2. CSS 애니메이션을 쉽게 구현 가능
3. 가볍다

* 단점 *
부분유료화가 되어있어, 다양한 기능을 사용하기 위해선 결제가 필요함