[JavaScript] GSAP 알아보기

GSAP란?

GreenSock에서 만든 JavaScript 애니메이션 라이브러리로 일반적으로 애니메이션 효과는 CSS 또는 jQuery의 .animate() 등으로 구현하지만, 기존의 CSS와 jQuery로 구현하기 어려운 복잡한 애니메이션을 구현하기 위해 만들어진 것이 바로 GSAP입니다.

---

GSAP 적용 방법

GreenSock 공식 홈페이지에서 설치 파일에서 다운로드 하는 방법이 있지만 귀찮으니 그냥 아래의 코드를 복붙하자.

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

기존 JS 코드와 GSAP 코드를 비교해보자

슬라이드 이펙트 02 포스팅에서 사용된 JS 코드를 가지고 왔다.

<script>
    const sliderInner = document.querySelector(".slider__inner");
    const slider = document.querySelectorAll(".slider");
    let currentIndex = 0;

    sliderInner.style.transition = "all 0.6s";
    setInterval(() => {
        currentIndex = (currentIndex + 1) % slider.length;

        sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
    }, 2000);
</script>

GSAP 코드로 바꿔보도록 하자. JS 코드보다 좀 더 간략화 된 모습을 알 수 있다.
사용 문법은 gsap.to(".요소 클래스값", { 속성 }); 이러하다.

<script>
    const slider = document.querySelectorAll('.slider');
    
    let currentIndex = 0;
    
    setInterval(() => {
        currentIndex = (currentIndex + 1) % ".slider".length;
        gsap.to(".slider__inner", {
            x : -800 * currentIndex
        });
    }, 2000);
</script>