GSAP

GSAP

GSAP는 자바스크립트의 애니메이션 라이브러리 입니다. 보다 쉽고, 부드러운 애니메이션 효과를 가지고 있으며 자바스크립트를 쉽게 사용할 수 있습니다. 일반적으로 애니메이션을 구현하려면 CSS를 이용하거나 제이쿼리를 사용하는데, GSAP를 이용하면 복잡한 애니메이션의 표현도 쉽게 할 수 있습니다.

---

link

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

CDN(데이터를 분산된 서버에서 받아오는 것)을 통해 GSAP를 사용할 수 있습니다.

홈페이지 가기

javascript

먼저 자바스크립트로 애니메이션을 설정 하는 방법입니다.

sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";

sliderInner.style.효과 = "translateX( )";

GSAP

다음은 GSAP를 이용해서 애니메이션을 적용 하는 방법 입니다.

gsap.to(".slider__inner", {
    duration : 0.6,  기본값이 존재
    x : - 800 * currentIndex
});

gsap.to(".slider__inner", {효과});

gsap는 to를 사용한 뒤, 선택할 요소를 받는데 자바스크립트의 querySelector와 같이 클래스를 표시하게 됩니다.