My Blog

Home

GSAP

GSAP를 사용하면 JS가 만질 수 있는 모든 것을 쉽게 애니메이션화할 수 있습니다. 부드러운 성능과 타의 추종을 불허하는 지원을 제공하여 재미있는 것에 집중할 수 있습니다.

CDN을 통해 jQuery 적용하기

GSAP의 특징

GSAP(GreenSock Animation Platform)은UI, SVG, Three.js 또는 React 등 어떤 프레임워크에서든 JavaScript가 다룰 수 있는 거의 모든 엘리먼트를 애니메이션화할 수 있다.
핵심 라이브러리에는 빠르고 브라우저 간 친화적인 애니메이션을 만드는 데 필요한 모든 것이 포함되어 있으며 핵심 외에도 다양한 플러그인을 통해서 스크롤 기반 애니메이션, 드래그 가능한 상호작용, 변형 등 특정 애니메이션 문제를 처리할 수 있다.

Tween

Tween은 애니메이션 작업을 실제로 처리하는 객체입니다. 쉽게 말해, 고성능 속성 변경 도구라고 생각하면 이해하기 쉽습니다. 애니메이션할 대상(객체), 지속 시간, 그리고 변경하고 싶은 속성들을 입력하면, Tween의 플레이헤드가 새로운 위치로 이동할 때마다 해당 시점에 맞는 속성 값을 계산해서 자동으로 적용합니다.

Tween을 만드는 생성자 함수

See the Pen GSAP Basic Tween by GSAP (@GreenSock) on CodePen.

TimeLine

Timeline은 Tween을 담는 컨테이너입니다.
시간상에서 애니메이션의 위치를 자유롭게 지정할 수 있고, pause(), play(), progress(), reverse(), timeScale() 같은 메서드로 전체 시퀀스를 쉽게 제어할 수 있는 궁극적인 시퀀싱 도구입니다.

See the Pen Position Parameter explainer - constructor by GSAP (@GreenSock) on CodePen.