GSAP

GSAP에 대해 알아봅시다!

📎GSAP란?

: GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다.
: 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적입니다.
하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다.

➰GSAP 사용법

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

📎 GSAP 사용 예시

<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;
    //let sliderCount = slider.length;
    setInterval(() => {
        currentIndex = (currentIndex + 1) % ".slider".length;
        //to 선택자 document.write 안써도 인식함
        //밑에와 같은 구조로 써줄 것
        gsap.to(".slider__inner", {
            //duration : 0.6, 
            x : -800 * currentIndex, //객체 스타일 구조
        });
    }, 2000);

➰gsap.to()

gsap.to에는 2가지 필수값이 필요. 대상과 속성

gsap.to(".box", {
x: 200
});
: css로 transform: translateX(200px) 과 같은 효과

'Javascript' 카테고리의 다른 글

mouseEnter / mouseOver 차이점  (2)	2022.09.06
요소 크기 메서드  (8)	2022.09.01
charAt()  (4)	2022.08.23
match()  (3)	2022.08.23
search()  (2)	2022.08.23