GSAP

⭐️ GSAP ⭐️

---

GSAP란?

GSAP (GreenSock Animation Platform)은 자바스크립트 애니메이션 라이브러리를 의미합니다.
자주 사용되지만 일일히 구현하기 불편하고 까다로운 자바스크립트 코드의 특정 기능을 기성품으로 만들어 놓은 패키지라고 생각하시면 됩니다.
GSAP는 세밀한 움직임과 동작의 연속성을 간편하게 설정할 수 있도록 돕습니다.

GSAP 사용 방법

01. CDN 라이브러리

CDN (Contents Delivery Network)는 데이터를 분산된 서버에서 받아오는 것을 의미합니다.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>       // CDN 에서 주소를 불러옴
    <script>          // 세부 사항 설정
        const slider = document.querySelectorAll(".slider");
        let currentIndex = 0;
        // let sliderCount = slider.length;
    
        setInterval(() => {
            // currentIndex = (currentIndex + 1) % sliderCount;
            // currentIndex = (currentIndex + 1) % (".slider").length;
            currentIndex = (currentIndex + 1) % slider.length;
    
            // gsap.to(document.querySelector(".slider__inner"))
            gsap.to(".slider__inner", {
                duration : 0.6,
                x : -800 * currentIndex
            });
        }, 2000);
    </script>

02. 공식 문서

라이브러리는 공식 문서(Docs) 또는 명세서(Specification)을 공식 웹사이트에 공유하고 있습니다.
라이브러리의 기초 지식, 사용법, 메소드, 옵션들을 배울 수 있습니다.