GitHubCreative Dev & WebGLidea-techcode

darkroomengineering/lenis

darkroomengineering·@darkroomengineering·Mar 27, 2023

개요 부드러운 스크롤이 어때야 하는지를 보여주는 라이브러리다. 13,000+ stars를 보유한 웹 스크롤 경험 분야의 대표적인 오픈소스 프로젝트로, Vercel, Linear 등 세련된 웹사이트에서 널리 사용된다.

핵심 내용 네이티브 스크롤 이벤트를 가로채서 부드러운 관성 기반 스크롤 애니메이션을 제공한다. React, Vue, Vanilla JS를 모두 지원하며 GSAP, Framer Motion 등 애니메이션 라이브러리와 쉽게 연동할 수 있다. 성능에 최적화되어 있어 requestAnimationFrame 기반으로 동작한다.

기존 대비 차별점 기존 smooth-scroll 라이브러리들은 접근성 문제나 성능 저하, 스크롤 이벤트 호환성 문제가 있었다. Lenis는 이러한 문제들을 해결하면서도 자연스러운 스크롤 물리학을 구현해 최신 크리에이티브 웹사이트의 표준이 되었다.

활용 가능성 포트폴리오 사이트, 브랜드 랜딩 페이지, 스크롤 기반 애니메이션이 있는 마케팅 사이트 등 시각적으로 세련된 웹 경험을 만들 때 활용할 수 있다. GSAP ScrollTrigger와 함께 사용하면 강력한 스크롤 기반 인터랙션을 구현할 수 있다.

참고 자료 - 원본

TypeScript13,401performancereactscrollsmoothsmooth-scrollsnapvanillavue
#smooth-scroll#animation#performance#react

Related in Creative Dev & WebGL