[JS] lodash throttle & gsap animation

lodash

객체, 배열 등의 데이터 구조를 쉽게 변환하여 사용할 수 있도록 하는 자바스크립트 라이브러리
A modern JavaScript utility library delivering modularity, performance & extras.

lodash 세팅하기

https://cdnjs.com/libraries/lodash.js 에 접속하여 필요한 버전을 세팅하고 코드를 복사하여 html파일의 알맞은 위치에 붙여넣는다

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Throttle

• 여러번 발생하는 이벤트를 일정 시간 동안 한번만 실행되도록 만드는 기능
• 잦은 이벤트 발생을 막아 성능상의 유리함을 가진다

Throttle 어떤 식으로 사용할 것인가?

홈페이지의 상단의 고정된 배너 이미지들이 특정 scollY 위치로 스크롤되면 자연스럽게 사라지고 다시 상단으로 스크롤시 보이도록 하기 위해 throttle을 사용하고
요소가 보여지고 숨겨질때의 움직임을 자연스럽게 하기 위해 gsap 애니메이션 라이브러리와 같이 사용할 것이다

// Badge Showing & Hiding

const badgeEl = document.querySelector("header .badges");

window.addEventListener(
  "scroll",
  _.throttle(function () { // _.throttle(함수, 시간)
    if (window.scrollY > 500) {
      // 배지 숨기기
      // gsap.to(요소, 지속시간, 옵션);
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: "none",
      });
    } else {
      // 배지 보이기
      // gsap.to(요소, 지속시간, 옵션);
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: "block",
      });
    }
  }, 300)
);

gsap

스크롤 기반 애니메이션 , 드래그 가능한 상호 작용, 모핑 등과 같은 크로스 브라우저 친화적인 애니메이션을 만들 수 있는 라이브러리

gsap 세팅하기

gsap cdn js 홈페이지나 gsap 공식 홈페이지에서 버전을 세팅하여 코드를 복사해온다

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

gsap 시작하기

공식문서 참고
https://greensock.com/get-started/

gsap tween 메서드 유형

• gsap.to() : 트윈의 가장 일반적인 유형. 요소의 현재 상태에서 시작 하여 트윈에 정의된 값을 끝나는 점을 지정하여 애니메이션을 적용한다
• gsap.from() : .to()와 반대로 애니메이션의 시작되는 점을 지정한다
• gsap.fromTo() : 시작값과 종료값을 정의할 수 있다
• gsap.set() : 회복할 수 있는 .to() 트윈이 기본 지속 시간이 0으로 설정된다. no animation