GSAP

GSAP

GrennSock에서 개발한 애니메이션 효과를 쉽게 사용할 수 있도록 제공하는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.

일반적으로 애니메이션은 CSS를 사용해 만들지만 GSAP를 사용하면 더욱 간편하며 복잡한 애니메이션을 구현할 수 있습니다.
또한 Jquery가 저물어가는 요즘 GSAP는 떠오르는 자바스크립트 라이브러리이기도 합니다.

▶ 설치 방법

GreenSock 사이트에서 다운 받아 적용할 수 있습니다.

또는 홈페이지에서 제공하는 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", {     //선택자 지정을 안해도 "" 안에 클래스를 지정할 수 있음
            duration : 0.6,
            x : -800*currentIndex
        });
    }, 2000);
</script>

스크립트로 cdn 링크를 건 후 GSAP의 프로퍼티를 선언하여 사용한 예 입니다. 이런 식으로 선언 후 적용할 클래스를 지정해 적용할 수 있습니다.

사용 가능한 GSAP의 프로퍼티 목록은 여기를 참조하세요.