[GSAP] 애니메이션 라이브러리 GSAP 셋팅부터 시작해봅니다!

 

💫 GSAP 이란?

GSAP은 이미 많은 사용자를 보여하고 있는 자바스크립트 애니메이션 라이브러리입니다.

보통 CSS 혹은 제이쿼리 등을 이용하여 애니메이션 효과를 구현하지만,

보다 복잡하고 화려한 애니메이션을 구현하기에 어려운 부분이 있기에

GSAP을 이용한다고 합니다!!

 

GSAP도 간단한 애니메이션을 구현하는 것은 사용법이 매우 간단하지만,

복잡한 애니메이션을 구현하게 될 때는 사용법이 무척 어렵고 헷갈려집니다;; 허허 

 

그리하여 저도 이참에 기본부터 시작해서 기깔나는 애니메이션을 구현할 수 있도록

GSAP 정복을 해보려고 하니 함께 하시죠!!!ㅎㅎㅎㅎ

우선 셋팅부터 해야겠지요?

 

설치(Installation)

GSAP 공홈에서는 zip파일로 다운로드, NPM, CDN, GITHUB 등 다양한 이용방법을 소개합니다.

저는 가장 간단한 CDN으로 해보았습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

위의 CDN은 가장 기본만 담겨있습니다.

GSAP을 많이 이용하는 이유인 ScrollTrigger 등을 이용하고 싶으시면,

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

위 코드를 gsap.min.js 아래에 추가작성하시면 됩니다!

 

 

혹여나 CDN이 아닌 다른 방법을 선택하고 싶으신 분들은 공홈으로 이동하셔서

확인 후 설치해보세요!

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

Docs

 

오늘은 GSAP 설치에 대해 알아보았습니다!

다음부터는 본격적으로 어떻게 작동시키는지에 대해서 

하나씩 공부할께요!! 

 

글 읽어 주셔서 감사합니다.
부족한 부분이 있다면 댓글로 알려주시면 감사히 배우겠습니다:)