[JAVASCRIPT] GSAP 라이브러리란?

자바스크립트 : GSAP 라이브러리

이번 시간에는 자바스크립트의 라이브러리인 GSAP 대해 알아보겠습니다.😆

---

#1. GSAP란?

The GreenSock Animation Platform의 약자로 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 애니메이션 자바스크립트 라이브러리 입니다.
특히 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다.

📖 GSAP 사용 방법 📖
GSAP는 CDN 에서 라이브러리 링크를 가져오면 됩니다. 라이브러리를 가져올 땐 js 파일 링크를 가져오는 것처럼, CDN의 절대 주소를 가져오면 됩니다!

---

#2. GSAP 객체를 만드는 기본 메서드

1. gsap.to()
2. gsap.from()
3. gsap.fromTo()

gsap의 메소드 to는 첫번째 인자로 DOM 요소를 받는데, 마치 querySelector와 같이 클래스를 표기하며 ,두 번째 인자로는 옵션값들을 담은 객체를 전달하게 됩니다.
각 메서드들의 사용방법은 거의 같습니다. to는 해당 요소를 어디로 보낼지, 마찬가지로 from은 어디에서, fromTo는 어디에서 어디로 어떻게 애니메이션을 만들지 결정하기 위한 메서드라고 생각하면 됩니다!

---

#3. GSAP 예제를 통해 알아보기

See the Pen Untitled by eu-ny (@eu-ny) on CodePen.