GSAP 알아보기

GSAP

GSAP(The GreenSock Animation Platform)은 자바스크립트 로 제어하는 타임라인 기반의 애니메이션 라이브러입니다. GSAP을 사용하면 자바스크립트 애니메이션을 좀 더 쉽게 작성할 수 있습니다.
GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있습니다.
공식페이지 : https://greensock.com/get-started/

---

사용하기

CDN을 사용합니다.

CDN

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

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

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

to 메소드는 타겟을 어디론가 보낸다는 것, from은 어디서부터, fromTo는 어디서부터 어디로 어떻게 애니메이션을 만들지 결정하기 위한 메소드임을 짐작할 수 있습니다.

예시

const slider = document.querySelectorAll(".slider");
let currentIndex = 0;

setInterval(() => {
currentIndex = (currentIndex + 1) % slider.length;     //괄호에 슬라이더 넣는거 외에 위에 방식으로 선택자를 만들어서 siler로만 써도 됨.

gsap.to(".slider__inner", {
    duration : 0.6, //안적어도 기본값으로 적용됨.
    x : - 800 * currentIndex,
});
}, 2000);]