GSAP란? GSAP 설치하기

고인물 개발자라면 GSAP 공홈가서 알아서 설치했지, 여기까지 오지 않았겠죠?

찍먹한 사람 기준으로 GSAP란 무엇이고, 어떻게 설치하면 되는지 설명해보겠습니다.

GSAP란?

요즘 웹 트렌드 중 하나는 인터랙션과 애니메이션입니다. 클릭에 반응하고, 막~~ 움직이는거 있잖아요.

사용성 높은 경험을 제공하니 어쩌니 하지만., 뭐니뭐니해도 걍 재밌고 있어 보이죠 ㅋㅋ

GSAP는 이런 인터랙션 및 애니메이션을 매우 쉽게 구현할 수 있는 자바스크립트 라이브러리입니다.

GSAP 메인화면에 나오는 텍스트인 'Animate Anything'가 춤추고 있습니다.

물론 순수 자바스크립트나 jQuery로도 구현 가능하죠. 그런데 복잡하고 어렵습니다.
생일 케이크에 불 붙이려고 하는데, 라이터 놔두고 부싯돌로 붙이는 것과 같습니다.

GSAP는 구현이 쉽고, 성능도 좋습니다. 웹사이트 모든 요소에 GSAP를 발라놔도 무리 없이 작동합니다.

텍스트, 이미지, 동영상 등 자바스크립트로 컨트롤 할 수 있는 거의 모든 요소를 쉽게 움직이게 할 수 있습니다.

요새 핫한 스크롤 트리거도 아주 간단하게 구현할 수 있죠.

때문에 인기 있는 자바스크립트 라이브러리입니다.

GSAP 설치하기

태그 삽입 (CDN 방식)

GSAP를 사용하는 가장 쉬운 방법입니다.

아래 코드를 HTML 파일의 닫는 </body>태그 전, 스크립트 시작 위치에 넣어주세요.

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

예를 들면 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  ...
</head>

<body>
  ...    
    <어쩌구 저쩌구 코드>
    <이런 저런 코드>

    <!-- GSAP 불러오기 코드를 이 자리에 넣어주세요. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js">
    </script>

    <script>
        // 페이지에 적용할 GSAP 코드는 이 자리에 입력해주세요.
    </script>

</body>
</html>

npm, yarn 설치

각각 아래의 명령어를 통해 설치할 수 있습니다.

npm

npm install gsap

yarn

yarn add gsap

설치가 완료 되면 자바스크립트 파일에서 GSAP를 아래 코드로 불러온 후 사용할 수 있습니다.

import gsap from 'gsap';

기본 기능 외에 추가 플러그인, 혹은 유료 버전은 지금은 생각지도 마세요. 다음에 다 다뤄 드릴거임.

혹시 성격 급한 사람은 GSAP 공식 웹사이트 설치 안내 페이지 여기로 가세요