**GSAP(The GreenSock Animation Platform)**은 자바스크립트 로 제어하는 타임라인 기반의 애니메이션 라이브러이다. GSAP을 사용하면 자바스크립트 애니메이션을 좀 더 쉽게 작성할 수 있다.

공식 페이지 : https://greensock.com/get-started/

CDN

GSAP 라이브러리는 기능별로 js 파일을 따로 제공하기 때문에 원하는 기능만 따로 로드하여 사용할 수 있다. 예를 들어 스크롤과 관련된 플러그인만 사용하려면 ScollToPlugin.min.js만 가져와 사용할 수 있다.

<!-- GSAP & ScollToPlugin -->
<script
  src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js>"
  integrity="sha512-1dalHDkG9EtcOmCnoCjiwQ/HEB5SDNqw8d4G2MKoNwjiwMNeBAkudsBCmSlMnXdsH8Bm0mOd3tl/6nL5y0bMaQ=="
  crossorigin="anonymous"
></script>

<script
  src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js>"
  integrity="sha512-9DDJWj17gkdeGHU0Zr76wc9jY2g0IwE7ZCIxakVYKyzlTiOWZDZJOTaVgAzNo+LB7+EbGXxwCXkOP+a5rgkuqQ=="
  crossorigin="anonymous"
></script>

Usage

// 기본 사용법
// gsap.to(요소, 시간, 옵션);

window.addEventListener(
  'scroll',
  _.throttle(function () {
    if (window.scrollY > 500) {
      // 배지 숨기기
      // gsap.to(요소, 지속시간, 옵션);
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: 'none',
      });

      // 버튼 보이기
      gsap.to('#to-top', 0.2, {
        x: 0,
      });
    } else {
      // 배지 보이기
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: 'block',
      });

      // 버튼 숨기기
      gsap.to('#to-top', 0.2, {
        x: 100,
      });
    }
  }, 300)
);