GSAP

GSAP 개념

The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다.
CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다.

---

GSAP 사용방법

코드를 작성하기전에, 먼저 HTML파일에 GSAP 라이브러리를 추가해야합니다. CDN을 이용하여 추가해도되고 직접 파일을 다운받아 추가해도 됩니다.

GSAP의 Tween 객체를 만드는 기본 메소드

gsap.to()
gsap.from()
gsap.fromTo()

gsap의 메소드 to는 첫번째 인자로 DOM 요소를 받는데, 마치 querySelector와 같이 클래스를 표기합니다.
결국 to 메소드는 타겟을 어디론가 보낸다는 것, from은 어디서부터, fromTo는 어디서부터 어디로 어떻게 애니메이션을 만들지 결정하기 위한 메소드임을 짐작할 수 있습니다.