[JS라이브러리] gsap 애니메이션 효과 라이브러리

요소를 제어하여 애니메이션 효과를 줄 수 있는 라이브러리

 

https://cdnjs.com/libraries/gsap

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

html에 복사 붙여넣기

 

사용법 gsap.to(요소, 지속시간, 옵션); 

- 지속시간은 s단위

- 옵션은 객체

- gsap이라는 애니메이션을 처리해주는 라이브러리를 이용하여 to 메소드를 사용하는 것

 

- 예시

window.addEventListener(
  "scroll",
  _.throttle(function () {
    console.log(window.scrollY);
    if (window.scrollY > 500) {
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: "none",
      });
    } else {
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: "block",
      });
    }
  }, 300)
);

 

 

https://greensock.com/docs/v3/GSAP/gsap.to() 

Docs