[JS] 자바스크립트 라이브러리 - GSAP로 애니메이션 처리하기

 

# GSAP 

 

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

• JavaScript에 애니메이션 처리 해주는 라이브러리 이다. 
• 기존에 CSS, 제이쿼리에서나 사용할 수 있었던 애니메이션 효과를 처리해줄 수 있다. 
• 처음에는 오히려 더 복잡한거 아닌가 생각했는데 몇번 사용해보지는 않았지만 그래도 애니메이션 처리하기에 제일 편리한 방법이 아닌가 생각이 든다!

 

 

• html 코드 복사해서 가져와 사용해주면 된다.

 

---

 

예를들어 

일정 범위이상 스크롤하면 사이트에 있던 배너가 사라지고 범위내에 들어가면 다시 나타나는 효과를 준다면?

 

기존 코드

const banner = document.querySelector('.banner');

window.addEventListener('scroll', _.throttle(() => {
  if(window.scrollY > 500) {
    // 배너 숨기기
    banner.style.display = 'none';
  } else {
    // 배너 보이기
    banner.style.display = 'block';
  }
}, 300));

 

 

사용 코드

const banner = document.querySelector('.banner');

window.addEventListener('scroll', _.throttle(() => {
  if(window.scrollY > 500) {
    // 배너 숨기기
    gsap.to(banner, .6, {
      display : 'none',
    });
  } else {
    // 배너 보이기
    gsap.to(banner, .6, {
      display : 'block',
    });
  }
}, 300));

 

• gsap.to(요소, 지속시간, 옵션)

✨

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

• throttle은 로데시에서 제공하는 기능으로 스크롤 할 때 많이 사용됨!