### start()
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Resumes the scroll functionality of the Lenis instance.
```APIDOC
## start()
### Description
Resumes the scroll.
### Method
`start`
### Endpoint
`start()`
```
--------------------------------
### Start Nuxt Development Server
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/nuxt/README.md
Run this command to start the development server locally on http://localhost:3000. Available for npm, pnpm, yarn, and bun.
```bash
# npm
npm run dev
```
```bash
# pnpm
pnpm dev
```
```bash
# yarn
yarn dev
```
```bash
# bun
bun run dev
```
--------------------------------
### Install Lenis using npm, yarn, or pnpm
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Install the Lenis library using your preferred package manager.
```bash
npm i lenis
# or
yarn add lenis
# or
pnpm add lenis
```
--------------------------------
### Install Dependencies with npm, pnpm, yarn, or bun
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/nuxt/README.md
Use these commands to install project dependencies based on your preferred package manager.
```bash
# npm
npm install
```
```bash
# pnpm
pnpm install
```
```bash
# yarn
yarn install
```
```bash
# bun
bun install
```
--------------------------------
### Install lenis
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md
Install the core lenis package via npm.
```bash
npm i lenis
```
--------------------------------
### Lenis Snap Initialization and Configuration
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/snap/README.md
How to initialize the Snap instance with a Lenis object and configure its behavior.
```APIDOC
## Initialization
### Description
Initializes the Snap instance to enable scroll snapping on a Lenis instance.
### Parameters
- **lenis** (Lenis) - Required - The Lenis instance to attach snapping to.
- **options** (Object) - Optional - Configuration object for snap behavior.
### Options
- **type** (string) - Optional - 'proximity' (default), 'mandatory', or 'lock'.
- **distanceThreshold** (string|number) - Optional - Distance from snap point to trigger snap (default: '50%').
- **debounce** (number) - Optional - Debounce time in ms (default: 500).
- **onSnapStart** (function) - Optional - Callback when snap starts.
- **onSnapComplete** (function) - Optional - Callback when snap completes.
- **lerp** (number) - Optional - Lerp value for snapping.
- **easing** (function) - Optional - Easing function for snapping.
- **duration** (number) - Optional - Duration for snapping.
### Request Example
```javascript
const snap = new Snap(lenis, {
type: 'lock',
distanceThreshold: '100%',
debounce: 0
})
```
```
--------------------------------
### Initialize basic snap points
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/snap/README.md
Configure Lenis with snap points defined by pixel values or DOM elements.
```jsx
import Lenis from 'lenis'
import Snap from 'lenis/snap'
const lenis = new Lenis()
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
const snap = new Snap(lenis)
// add snaps points
snap.add(500) // snap at 500px
snap.add(1000) // snap at 1000px
snap.add(1500) // snap at 1500px
// or add an element to snap to
snap.addElement(document.querySelector('.element'), {
align: ['start', 'end'], // 'start', 'center', 'end'
})
snap.addElement(document.querySelector('.element1'), {
align: 'center', // 'start', 'center', 'end'
})
// or add elements at once
snap.addElements(document.querySelectorAll('.section'), {
align: ['start', 'end'], // 'start', 'center', 'end'
})
```
--------------------------------
### Locally Preview Production Build
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/nuxt/README.md
Use these commands to preview your Nuxt application's production build locally. Compatible with npm, pnpm, yarn, and bun.
```bash
# npm
npm run preview
```
```bash
# pnpm
pnpm preview
```
```bash
# yarn
yarn preview
```
```bash
# bun
bun run preview
```
--------------------------------
### Build Nuxt Application for Production
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/nuxt/README.md
Execute these commands to build your Nuxt application for production deployment. Supports npm, pnpm, yarn, and bun.
```bash
# npm
npm run build
```
```bash
# pnpm
pnpm build
```
```bash
# yarn
yarn build
```
```bash
# bun
bun run build
```
--------------------------------
### Import Lenis CSS
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md
Include the required CSS file to ensure proper scrolling behavior.
```js
import 'lenis/dist/lenis.css'
```
--------------------------------
### Basic Lenis Initialization and Scroll Event Listener
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Initialize Lenis with autoRaf enabled and listen for scroll events. Logs scroll event data to the console.
```js
// Initialize Lenis
const lenis = new Lenis({
autoRaf: true,
});
// Listen for the scroll event and log the event data
lenis.on('scroll', (e) => {
console.log(e);
});
```
--------------------------------
### Configure slideshow snap behavior
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/snap/README.md
Initialize a snap instance with lock type for slideshow-like navigation.
```jsx
const snap = new Snap(lenis, {
type: 'lock',
distanceThreshold: '100%',
debounce: 0,
})
```
--------------------------------
### Snap Methods
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/snap/README.md
Methods available on the Snap instance to manage snap points and navigation.
```APIDOC
## Snap Methods
### Description
Methods to programmatically add snap points, navigate between them, and control the snap engine.
### Methods
- **add(value: number)** - Add a specific pixel value as a snap point.
- **addElement(element: HTMLElement, options: Object)** - Add an element as a snap target.
- **addElements(elements: HTMLElement[], options: Object)** - Add multiple elements as snap targets.
- **next()** - Navigate to the next snap point.
- **previous()** - Navigate to the previous snap point.
- **goTo(index: number)** - Navigate to a specific snap point index.
- **start()** - Enable the snap functionality.
- **stop()** - Disable the snap functionality.
- **resize()** - Recalculate snap point positions.
```
--------------------------------
### Lenis Initialization with Custom raf Loop
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Initialize Lenis and use requestAnimationFrame to manually update the scroll position on each frame.
```js
// Initialize Lenis
const lenis = new Lenis();
// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
```
--------------------------------
### Use useLenis Hook with Callback
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/vue/README.md
Utilize the useLenis hook with a custom scroll callback and priority.
```vue
```
--------------------------------
### Log Lenis instance
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/infinite/static.html
Outputs the initialized Lenis instance to the console for debugging purposes.
```javascript
console.log(lenis)
```
--------------------------------
### Usage of VueLenis and useLenis
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/vue/README.md
Implement the VueLenis component and access the instance via the useLenis hook.
```vue
```
--------------------------------
### No-code Lenis Integration
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Drop this into your HTML for instant smooth scrolling. It handles compatibility, modals, anchors, and scroll resets.
```html
```
--------------------------------
### resize()
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
This method computes internal sizes and must be used if the `autoResize` option is set to `false`.
```APIDOC
## resize()
### Description
Compute internal sizes, it has to be used if `autoResize` option is `false`.
### Method
`resize`
### Endpoint
`resize()`
```
--------------------------------
### Include Lenis via script tag
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Include the Lenis library directly in your HTML using a script tag from a CDN.
```html
```
--------------------------------
### Initialize Lenis with autoRaf
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/core/static.html
Configures Lenis with autoRaf enabled for automatic requestAnimationFrame handling.
```javascript
const lenis = new Lenis({
autoRaf: true,
})
```
```javascript
console.log(lenis)
```
--------------------------------
### Import Lenis in JavaScript
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Import the Lenis class into your JavaScript project.
```js
import Lenis from 'lenis'
```
--------------------------------
### Initialize Lenis with autoRaf
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/infinite/static.html
Configures Lenis with autoRaf enabled to automatically handle the requestAnimationFrame loop.
```javascript
const lenis = new Lenis({
autoRaf: true,
})
```
--------------------------------
### Basic ReactLenis Usage
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md
Initialize Lenis in a React application using the ReactLenis component and access the instance via the useLenis hook.
```jsx
import { ReactLenis, useLenis } from 'lenis/react'
function App() {
const lenis = useLenis((lenis) => {
// called every scroll
console.log(lenis)
})
return (
<>
{ /* content */ }
>
)
}
```
--------------------------------
### Initialize Lenis Scroll
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/horizontal/static.html
Instantiate Lenis with autoRaf enabled for automatic animation frame requests. Logs the Lenis instance to the console.
```javascript
body { height: 300vh; }
const lenis = new Lenis({
autoRaf: true,
})
console.log(lenis)
```
--------------------------------
### Lenis v1 vs v2 Options Structure
Source: https://github.com/darkroomengineering/lenis/blob/main/V2-ROADMAP.md
Compares the flat options structure of v1 with the nested object structure introduced in v2 for related configurations like wheel and touch scrolling.
```javascript
new Lenis({
smoothWheel: true,
wheelMultiplier: 1,
syncTouch: true,
syncTouchLerp: 0.075,
touchMultiplier: 1,
touchInertiaExponent: 1.7,
lerp: 0.1,
})
```
```javascript
new Lenis({
wheel: {
smooth: true,
lerp: 0.1,
multiplier: 1,
},
touch: {
smooth: true,
lerp: 0.075,
multiplier: 1,
inertia: 1.7,
},
})
```
--------------------------------
### Link Lenis CSS file via HTML
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Link the Lenis CSS file in your HTML using a CDN URL.
```html
```
--------------------------------
### Configure Lenis in Nuxt
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/vue/README.md
Add the Lenis module to your Nuxt configuration file.
```javascript
// nuxt.config.js
export default defineNuxtConfig({
modules: ['lenis/nuxt'],
})
```
--------------------------------
### on(id, function)
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Attaches an event listener to the Lenis instance. The `id` parameter specifies which instance event to listen for, and `function` is the callback to execute when the event is triggered.
```APIDOC
## on(id, function)
### Description
Attaches an event listener to the Lenis instance for specific events.
### Method
`on(id, function)`
### Endpoint
N/A (Instance Method)
### Parameters
- **id** (string) - Required - The identifier for the instance event to listen to. Refer to [instance events](#instance-events) for available IDs.
- **function** (function) - Required - The callback function to execute when the specified event is triggered.
### Request Example
```javascript
lenisInstance.on('scroll', () => {
console.log('Scrolled!');
});
```
### Response
N/A (void function)
```
--------------------------------
### Framer Motion integration
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md
Integrate Lenis with Framer Motion's frame loop.
```jsx
import { ReactLenis } from 'lenis/react';
import type { LenisRef } from 'lenis/react';
import { cancelFrame, frame } from 'framer-motion';
import { useEffect, useRef } from 'react';
function App() {
const lenisRef = useRef(null)
useEffect(() => {
function update(data: { timestamp: number }) {
const time = data.timestamp
lenisRef.current?.lenis?.raf(time)
}
frame.update(update, true)
return () => cancelFrame(update)
}, [])
return (
)
}
```
--------------------------------
### Integrate Lenis with GSAP ScrollTrigger
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Synchronize Lenis scrolling with GSAP's ScrollTrigger and use Lenis's raf method with GSAP's ticker for smooth animations. Disable GSAP's lag smoothing.
```js
// Initialize a new Lenis instance for smooth scrolling
const lenis = new Lenis();
// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
lenis.on('scroll', ScrollTrigger.update);
// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
// This ensures Lenis's smooth scroll animation updates on each GSAP tick
gsap.ticker.add((time) => {
lenis.raf(time * 1000); // Convert time from seconds to milliseconds
});
// Disable lag smoothing in GSAP to prevent any delay in scroll animations
gsap.ticker.lagSmoothing(0);
```
--------------------------------
### GSAP integration
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md
Sync Lenis with the GSAP ticker for consistent animation timing.
```jsx
import gsap from 'gsap'
import { ReactLenis } from 'lenis/react'
import { useEffect, useRef } from 'react'
function App() {
const lenisRef = useRef()
useEffect(() => {
function update(time) {
lenisRef.current?.lenis?.raf(time * 1000)
}
gsap.ticker.add(update)
return () => gsap.ticker.remove(update)
}, [])
return (
)
}
```
--------------------------------
### Import Lenis CSS stylesheet
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Import the Lenis stylesheet directly into your JavaScript module.
```js
import 'lenis/dist/lenis.css'
```
--------------------------------
### Configure Anchor Link Scrolling Options
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Customize anchor link behavior by providing an options object to `anchors`. You can specify an `offset` for the scroll position and a callback function `onComplete` to execute after scrolling.
```javascript
new Lenis({
anchors: {
offset: 100,
onComplete: ()=>{
console.log('scrolled to anchor')
}
}
})
```
--------------------------------
### Integrate Motion with Lenis
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/vue/README.md
Sync Lenis animation frames with the Motion library's frame loop.
```vue
```
--------------------------------
### Integrate GSAP with Lenis
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/vue/README.md
Synchronize Lenis scroll events with GSAP ScrollTrigger and the GSAP ticker.
```vue
```
--------------------------------
### raf(time)
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
This method must be called on every frame for internal usage of the Lenis library. It takes the current time in milliseconds as an argument.
```APIDOC
## raf(time)
### Description
Must be called every frame for internal usage.
### Method
`raf`
### Parameters
#### Path Parameters
- **time** (number) - Required - Time in ms
### Endpoint
`raf(time)`
```
--------------------------------
### Enable Nested Scroll with Lenis
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Use `allowNestedScroll: true` to automatically detect and allow native scrolling for nested elements. Be aware of potential performance impacts.
```javascript
const lenis = new Lenis({
allowNestedScroll: true,
})
```
--------------------------------
### Register Lenis Plugin in Vue
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/vue/README.md
Register the Lenis plugin globally in your Vue application entry point.
```javascript
// main.js
import { createApp } from 'vue'
import LenisVue from 'lenis/vue'
const app = createApp({})
app.use(LenisVue)
```
--------------------------------
### Enable Anchor Links with Lenis
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Set `anchors: true` in the Lenis constructor to allow anchor links to function correctly during scrolling. This ensures that clicking on anchor links navigates to the intended section.
```javascript
new Lenis({
anchors: true
})
```
--------------------------------
### scrollTo(target, options)
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Scrolls to a specified target with various customizable options for animation and behavior.
```APIDOC
## scrollTo(target, options)
### Description
Scroll to target with customizable options.
### Method
`scrollTo`
### Parameters
#### Path Parameters
- **target** (number | string | HTMLElement) - Required - Goal to reach. Can be a number (scroll in pixels), a string (CSS selector or keyword like 'top', 'left', 'start', 'bottom', 'right', 'end'), or a DOM element.
- **options** (object) - Optional - Configuration for scrolling behavior.
- **offset** (number) - Optional - Equivalent to `scroll-padding-top`.
- **lerp** (number) - Optional - Animation lerp intensity.
- **duration** (number) - Optional - Animation duration in seconds.
- **easing** (function) - Optional - Animation easing function.
- **immediate** (boolean) - Optional - If true, ignores duration, easing, and lerp.
- **lock** (boolean) - Optional - If true, prevents user scrolling until the target is reached.
- **force** (boolean) - Optional - If true, reaches target even if the instance is stopped.
- **onComplete** (function) - Optional - Callback function called when the target is reached.
- **userData** (object) - Optional - An object forwarded through `scroll` events.
### Endpoint
`scrollTo(target, options)`
```
--------------------------------
### destroy()
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Destroys the Lenis instance and removes all associated event listeners. This is a cleanup method to properly dispose of the instance when it's no longer needed.
```APIDOC
## destroy()
### Description
Destroys the instance and removes all events.
### Method
`destroy()`
### Endpoint
N/A (Instance Method)
### Parameters
None
### Request Example
```javascript
lenisInstance.destroy();
```
### Response
N/A (void function)
```
--------------------------------
### Prevent Specific Scroll Events with HTML Attributes
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Use specific attributes like `data-lenis-prevent-wheel`, `data-lenis-prevent-touch`, `data-lenis-prevent-vertical`, or `data-lenis-prevent-horizontal` to selectively block certain types of scroll events.
```html
scrollable content
```
```html
scrollable content
```
```html
scrollable content
```
```html
scrollable content
```
```html
scrollable content
```
--------------------------------
### Custom requestAnimationFrame loop
Source: https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md
Manually control the Lenis requestAnimationFrame loop by disabling autoRaf and providing a custom update function.
```jsx
import { ReactLenis } from 'lenis/react'
import { useEffect, useRef } from 'react'
function App() {
const lenisRef = useRef()
useEffect(() => {
function update(time) {
lenisRef.current?.lenis?.raf(time)
}
const rafId = requestAnimationFrame(update)
return () => cancelAnimationFrame(rafId)
}, [])
return (
)
}
```
--------------------------------
### Set body height for scrolling
Source: https://github.com/darkroomengineering/lenis/blob/main/playground/infinite/static.html
Defines the body height to ensure sufficient scrollable area for Lenis to operate.
```css
body { height: 300vh; }
```
--------------------------------
### Prevent Lenis Scroll with JavaScript Function
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Configure Lenis to prevent scrolling for specific elements by providing a callback function to the `prevent` option. This function receives the target node and should return `true` if scrolling should be prevented.
```javascript
const lenis = new Lenis({
prevent: (node) => node.id === 'modal',
})
```
--------------------------------
### Modify Virtual Scroll Events
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Customize scroll event behavior before consumption. Returning false prevents smoothing. Use this to adjust scroll speed or conditionally disable smoothing.
```javascript
({ event }) => { e.deltaY /= 2 }
```
```javascript
({ event }) => !event.shiftKey
```
--------------------------------
### Prevent Lenis Scroll with HTML Attribute
Source: https://github.com/darkroomengineering/lenis/blob/main/README.md
Apply the `data-lenis-prevent` attribute to an element to stop all smooth scroll events originating from it or its children.
```html
scrollable content
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.