### 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.