[React] Lenis로 부드러운 스크롤 효과 추가하기

1. Lenis?

• 일반적인 스크롤 이벤트의 딱딱한 움직임 대신, 부드럽게 감속하거나 가속되는 애니메이션 효과를 추가할 수 있는 라이브러리
• 아래 링크에 사용하는 방법이 기재되어 있다.
• https://github.com/darkroomengineering/lenis

GitHub - darkroomengineering/lenis: How smooth scroll should be

 

 

2. 사용하기

• Git에 기재된 코드에 Lenis 인스턴스를 생성하여 감속 효과를 정의해보았다.
  • Typescript 사용 시, time에 number 타입을 지정해준다.
• 해당 옵션도 Lenis 저장소에 잘 설명되어 있으니 참고! duration 및 easing 값을 조정하여 스크롤 효과를 조절할 수 있다.
• lenis 함수 정의 후, 웹 전체에 스크롤 효과를 적용해줄 것이기 때문에 App.tsx에 useEffect를 사용하여 적용해주었다.

import Lenis from "@studio-freight/lenis";

const lenis = () => {
  const lenis = new Lenis({
    duration: 1,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  });

  function raf(time: number) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);
};

export default lenis;

 

function App() {
  useEffect(() => {
    // 스크롤 효과 적용
    lenis();
  }, []);
  ...
  }