GSAP

GSAP

GSAP에 대해 알아보는 시간을 가지도록 하겠습니다.
GSAP를 이용해서 애니메이션 효과를 줘보도록 하겠습니다.

---

01. GSAP란?

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리 입니다.
일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사람의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다.
GSAP는 제이쿼리보다 훨씬 퍼포먼스가 좋고 사용법도 간단합니다 또한 훨씬 부드럽게 표현 가능합니다.

---

02. 사용법

CDN을 가져와 위에 깔아주고 시작합니다.

{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
    <script>
        const slider = document.querySelectorAll(".slider");
        let currentIndex = 0;

        setInterval(() => {
            currentIndex = (currentIndex + 1) % slider.length; 

            gsap.to(".slider__inner", {
                x : -800 * currentIndex
            });
        }, 2000);
    </script>
}

---

03. 결과물