JAVASCRIPT | GSAP

🤔 GSAP, 그게 뭔데?

GSAP_The GreenSock Animation Platform;
CSS나 jQuery등을 사용해 애니메이션 효과를 구현하는데 있어 번거로움과 복잡함을 GSAP를 통해 훨씬 간편하게 설정이 가능합니다. 세세한 부분까지 설정이 가능하며 라이브러리 참고가 가능하여 여러 웹사이트에서 사용하고 있습니다.

---

🤓 GSAP, 사용해볼까?

위의 사진처럼 공식 사이트에서 설치하거나 CDN을 통해 사용할 수 있습니다.

📄 SLIDER 효과_좌로 움직이는 이미지를 통해 확인해보자 !

<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 : -600 * currentIndex
        });
    }, 2000);
</script>