[JS] GSAP

웹 개발하는데 생각보다 이곳 저곳에서 소스를 많이 긁어오는구나 싶다…

임베디드 했을 때는 이런거 없이 전부 코딩했었는데, 새롭다!

 

GSAP 바로가기

↓↓↓↓↓↓↓↓↓

https://greensock.com/docs/v3/Installation

 

 

GSAP

Greensock에서 제공해주는 자바스크립트 애니메이션 라이브러리라고 한다. 

상당히 복잡한 애니메이션 구현이 가능해서 매우 인기라고 한다.

 

 

사용방법은 이전 것보다 살짝 복잡하다.

우선 저 사이트로 들어가서 GSAP을 설치해야한다.

그 다음 원하는 플러그인을 고르면 코드가 보여지는데, 이 코드를 사용하면 된다.

<!--GSAP & ScrollToPlugin-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js" integrity="sha512-nTHzMQK7lwWt8nL4KF6DhwLHluv6dVq/hNnj2PBN0xMl2KaMm1PM02csx57mmToPAodHmPsipoERRNn4pG7f+Q==" crossorigin="anonymous"></script>

 

HTML에 위에 코드까지 적으면, JavaScript에서 하기와 같이 사용이 가능하다.

 

/**
* 페이지 스크롤에 따른 요소 제어
*/

// 페이지 스크롤에 영향을 받는 요소들을 검색!
const badgeEl = document.querySelector('header .badges')
const toTopEl = document.querySelector('#to-top')

// 페이지에 스크롤 이벤트를 추가!
// 스크롤이 지나치게 자주 발생하는 것을 조절(throttle, 일부러 부하를 줌)
window.addEventListener('scroll', _.throttle(function () {

  // 페이지 스크롤 위치가 500px이 넘으면.
  if (window.scrollY > 500) {
    // Badge 요소 숨기기!
    gsap.to(badgeEl, .6, {
      opacity: 0,
      display: 'none'
    })

    // 상단으로 스크롤 버튼 보이기!
    gsap.to(toTopEl, .2, {
      x: 0
    })
  // 페이지 스크롤 위치가 500px이 넘지 않으면.
  } else {
    // Badge 요소 보이기!
    gsap.to(badgeEl, .6, {
      opacity: 1,
      display: 'block'
    })

    // 상단으로 스크롤 버튼 숨기기!
    gsap.to(toTopEl, .2, {
      x: 100
    })
  }
}, 300))

// 상단으로 스크롤 버튼을 클릭하면,
toTopEl.addEventListener('click', function () {
  // 페이지 위치를 최상단으로 부드럽게(0.7초 동안) 이동.
  gsap.to(window, .7, {
    scrollTo: 0
  })
})

GSAP을 이용해서 스크롤에 따라 보여지고 사라지는 배지 구현이 가능하다.