GSAP

GSAP

GSAP란, GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다.
일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery) 사용으로 구현하는 것이 일반적이지만, GSAP 위 두 개에 비해 사용하기 편하며 퍼포먼스도 좋습니다.

사용 방법

사용 방법은 GASP에서 gsap.min.js를 가져와서 사용할 수 있습니다.

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

    <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", {
                duration : 0.6,
                x: -800 * currentIndex
            })
        },1500);
    </script>

결과물

GASP를 이용해 슬라이드 애니메이션을 만든 결과물입니다.