GSAP 소개

GSAP 소개

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 메서드를 사용하는게 정석이죠? 하지만 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장하는데 그만큼 사용법도 복잡하고 헷갈리죠. 그렇다면 GSAP로 애니메이션을 구현하기 전에 기초부터 배워봐야 겠죠?

---

사용준비

사용하려면 cdn을 이용해서 간단하게 사용해볼 수 있습니다.

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

---

사용법 익히기

가장 간단한 to("대상", {효과}) 메서드 부터 알아보겠습니다. to 메서드는 대상을 지정하고 대상에 지정한 효과를 걸 수 있습니다. 다음은 .slider__inner 박스에 0.6s 동안 지정한 수치 만큼 translateX() 한다는 효과를 주는 코드입니다.

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