GSAP란?

GSAP

웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다. 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 탁월한 퍼포먼스가 돋보이는 애니메이션 전용 라이브러리입니다.

사용법

기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 애니메이션을 쉽게 적용할 수 있게 만들어줍니다.

예시

원본 소스 보기

GSAP 소스

<!-- GSAP -->
<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,
        });

    }, 2000);
</script>