Lenis smooth scroll

Jan 04, 2023 in Scroll 8125 views

Download

User Rating: 4.5/5 ( 1 votes)

Your Rating:

Lenis smooth scroll is our take on smooth scroll, lightweight, hard working, smooth as butter scroll

Performant
Lightweight (~2Kb gzipped)
Run scroll in main thread
Accessibility (CMD+F page search, keyboard navigation, keep scroll position on page refresh, etc.)
External RAF
SSR proof
Not opinionated
Tree-shakeable
Custom scroll easing/duration

Feature	Locomotive-scroll	GSAP ScrollSmoother	Lenis
Native scrollbar	❌	✅	✅
Native scroll inputs	❌	✅	❌
Normalize scroll experience	✅	❌	✅
Accessibility	❌	❌	✅
CSS Sticky	❌	❌	✅
IntsersectionObserver	❌	❌	✅
Open source	✅	❌	✅
Built-in animation system	✅	✅	❌
Size (gzip)	12.33KB	26.08KB	2.13kb

1. INCLUDE JS FILE

<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.js"></script>

2. JAVASCRIPT

const lenis = new Lenis({
  wrapper: NodeElement, // element which has overflow
  content: NodeElement, // usually wrapper's direct child
})

3. Instance settings

Option	Type	Default	Description
wrapper	NodeElement	window	Default element which has overflow
content	NodeElement	document.body	wrapper's direct child
duration	number	1.2	Specifies the duration of the animation
easing	function	(t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))	Specifies the rate of change of a specific value, our default is custom but you can pick one from Easings.net
direction	string	vertical	vertical or horizontal scrolling.
gestureDirection	string	vertical	vertical, horizontal or both.
smooth	boolean	true	Enable or disable 'smoothness'
mouseMultiplier	number	1	This value is passed directly to Virtual Scroll
smoothTouch	boolean	false	Enable or disable 'smoothness' while scrolling using touch. Note: We have disabled it by default because touch devices native smoothness is impossible to mimic
touchMultiplier	number	string	This value is passed directly to Virtual Scroll
infinite	boolean	false	Enable infinite scrolling!

4. Instance Methods

Method	Description	Arguments
raf(time)	Must be called every frame for internal usage.
scrollTo(target,{offset, duration, easing, immediate})	Scroll to a target.	target: can be Number, NodeElement or String (CSS selector). offset : Number equivalent to scroll-padding-top. duration : Number scroll duration in seconds. easing : Function. immediate : ignore duration and easing.
on(id,callback({scroll,limit,velocity,direction}))	id can be any of the following instance events to listen.
stop()	To pause the scroll
start()	To resume the scroll
destroy()	To destroy the instance and remove all events.

5. Instance Events

Event	Callback Arguments
scroll	scroll: returns scroll position. limit: returns scroll limit. velocity: returns scroll velocity. direction: returns 1 or -1.

6. Considerations

Things to consider if you want to add Lenis to your codebase will be listed here.

Make sure scroll-behavior is set to initial or not set at all

html {
  scroll-behavior: initial;
}

Keep html and body elements default sized (see this issue)

html,
body {
  min-height: 100%;
  height: auto;
}

Use data-lenis-prevent attribute on nested scroll elements. In addition, we advice you to add overscroll-behavior: contain on this element.

<div data-lenis-prevent>scroll content</div>

Manually use lenis.scrollTo('#anchor') on anchor link click (see this issue)

<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>

6. Limitations

JS Tutorial