darkroomengineering/lenis

어떤 프로젝트인가요?

핵심 기능

• 01런타임 의존성이 없고 번들 크기가 작음
• 02하나의 인스턴스로 세로, 가로, 중첩 스크롤을 부드럽게 처리
• 03position: sticky와 앵커 링크 같은 네이티브 스크롤 동작 유지
• 04WebGL 장면, GSAP ScrollTrigger, 패럴랙스 효과와 동기화
• 05React, Vue, Framer용 공식 패키지와 snap 플러그인 제공

활용 사례

• 마케팅 사이트나 포트폴리오 사이트에 스무스 스크롤 추가
• Three.js 또는 WebGL 장면을 페이지 스크롤과 동기화
• GSAP ScrollTrigger로 스크롤 기반 애니메이션 제작
• 모달이나 중첩 패널 안에 부드러운 스크롤 영역 구현

빠른 시작

1. 1

   npm으로 Lenis 설치하기

   npm i lenis
2. 2

   코드에서 Lenis 가져오기

   import Lenis from 'lenis'
3. 3

   autoRaf를 활성화해 인스턴스 생성하기

사용 전 알아둘 점

• !autoRaf 또는 노코드 설정을 사용하지 않는 경우 Lenis를 자체 스크롤 처리 및 애니메이션 루프에 연결해야 합니다.

토픽

자주 묻는 질문

lenis은(는) 무엇인가요?

네이티브 스크롤에 부드러운 애니메이션을 더하는 가볍고 의존성 없는 웹용 스무스 스크롤 라이브러리입니다. Lenis는 웹 페이지용 스무스 스크롤 라이브러리입니다. 휠과 터치 입력을 가로채 스크롤 위치를 목표 지점까지 애니메이션으로 이동시켜, 사이트에서 더 부드럽고 자연스러운 스크롤을 구현합니다. 브라우저 자체의 스크롤을 대체하는 대신 감싸는 방식이므로 position: sticky, 앵커 링크, 접근성 동작이 계속 정상적으로 작동합니다.

lenis은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

lenis은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

lenis은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. lenis의 마지막 커밋은 2026년 10월 29일입니다.

lenis은(는) 어디에 사용할 수 있나요?

마케팅 사이트나 포트폴리오 사이트에 스무스 스크롤 추가 Three.js 또는 WebGL 장면을 페이지 스크롤과 동기화 GSAP ScrollTrigger로 스크롤 기반 애니메이션 제작 모달이나 중첩 패널 안에 부드러운 스크롤 영역 구현

lenis는 어떻게 설치하나요?

npm으로 Lenis 설치하기: npm i lenis 코드에서 Lenis 가져오기: import Lenis from 'lenis' autoRaf를 활성화해 인스턴스 생성하기

lenis은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/darkroomengineering/lenis