[TweenMax | GSAP] 트윈맥스 - 기초1 (세팅하기)

트윈맥스는 다양한 애니메이션을 만들기에 너무 유용한 라리브러리 입니다.
또 리액트도 지원해줘서 다양하게 활용이 가능합니다.

greensock.com에 문서정리가 잘 되어있어서 딱히 블로그 글을 읽지 않고 원본 문서들만봐도 충분히 활용 할 수 있겠지만

실무를 하면서 유용하게 자주 사용한던 메소드와 기능들을 위주로 블로그글을 적어나가보고자 합니다! 

installation : greensock.com/docs/v3/Installation

 

1. CDN

간단하게 cdn 으로 불러올 수 있습니다.

html 하단에 다음과 같이 불러옵니다.

<!-- html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"> </script>

js에서 사용하는 방법입니다.
간단하게 gsap으로 불러와, 문법에 맞게 작성해주면 됩니다.

//js
gsap.from('.circle', 5, { x: 500, opacity: 0 });

---

2. NPM

트윈맥스, GSAP은 리액트를 지원하므로, npm 으로 로드하는방법도 알아봅시다.

npm install gsap

리액트쪽은 추후 사용해보고 내용 보완하겠습니다!

---

3. 다운로드

공식문서에 방법이 적혀있으니 공식문서에서 다운로드 받고 활용합니다!

- gsap에서 사용하는 다양한 플러그인을 활용할 예정이라면 다운받아야합니다!