Locomotive Smooth Scroll Setup
Sets up Locomotive Scroll v5 (built on Lenis) for smooth momentum scrolling. Covers initialization, Lenis options, start/stop/destroy controls, nested scroll containers, and data-attribute-driven per-element speed and offset overrides.
Setup — External Scripts
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll/bundled/locomotive-scroll.css">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll/bundled/locomotive-scroll.min.js"></script>Code
// Initialize Locomotive Scroll
const locomotiveScroll = new LocomotiveScroll();Guide
Overview
Locomotive Scroll v5 is built on top of Lenis and provides smooth momentum scrolling with per-element speed and offset controls via data attributes. For all instance settings read the Locomotive Scroll v5 Documentation.
Attributes
data-scroll enables viewport detection on an element. data-scroll-speed sets the parallax speed (e.g. 0.1 or -0.05). data-scroll-offset sets the trigger offset (e.g. 25%, 50%). Example: <h2 data-scroll data-scroll-speed="-0.5" data-scroll-offset="50%, 50%">What's up?</h2>
Lenis Options
Pass Lenis options via the lenisOptions key. Common options: lerp (inertia, default 0.1), duration (animation duration in seconds), easing (custom easing function). For a full list check the Lenis documentation.
Start / Stop
Pass autoStart: false to prevent Locomotive from starting on load, then call locomotiveScroll.start() to enable scroll manually — useful for page transition setups. Call locomotiveScroll.stop() to disable scroll, for example when opening a modal.
Destroy
Call locomotiveScroll.destroy() to fully tear down the scroll instance and remove all event listeners.
Nested Scroll
For modals or other elements with overflow: scroll, add the data-lenis-prevent attribute to prevent Locomotive from capturing scroll events inside that element.