GSAP 개념 정리

GSAP 개념 정리

The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인기반의 애니메이션 자바스크립트 라이브러리입니다.

01. 사용법

기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 애니메이션을 쉽게 적용할 수 있게 만들어줍니다.

02. 자바스크립트와 GSAP의 비교

//javascript
const sliderInner = document.querySelector(".보여지는_곳")
const slider = document.querySelectorAll(".이미지")

let currentIndex = 0;  

sliderInner.style.transition = "all 0.8s"

setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;

    sliderInner.style.transform = "translateX(" + -800 * currentIndex + "px)"
},1500) 

//GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
const slider = document.querySelectorAll(".slider");
let currentIndex = 0;

setInterval(()=> {
    currentIndex = (currentIndex + 1) % slider.length;

    gsap.to(".slider__inner",{
        x : -800 * currentIndex
    })
},1500) 

보이는 것과 같이 자바스크립트처럼 GSAP는 선택자를 많이 지정해줄 필요가 없으며, 스크립트도 간편해졌습니다.