Locomotive Scroll

Version 5.0

Github↗
Documentation↗

©2026

Locomotive® Scroll

A lightweight scroll library for modern web experiences. Detection, animation, and smooth scrolling — all in 9.4kB. Built on top of Lenis.

Version 5.0

  • Built on top of Lenis

    Latest stable release with improved touch handling and performance fixes. No more greedy CSS transforms!

  • TypeScript First

    Fully typed. Better autocomplete, fewer bugs, happier developers.

  • Dual Intersection Observers

    Separate observers for simple triggers vs. continuous animations. No wasted RAF cycles.

  • Smart Touch Detection

    Parallax auto-disabled on mobile. Opt-in with one attribute.

  • Production Ready

    Accessible by default. Native scrollbar, keyboard nav, and proper cleanup for SPAs.

  • Lightweight

    Only 9.4kB gzipped

Version 5 is a complete rewrite. Designed for modern workflows, built on top of Lenis, and optimized for production.

Built-in Tools Work faster Work smarter

01 In-view detection Add classes, trigger callbacks, or fire custom events when elements enter the viewport. Built on Intersection Observer for native performance.

In-view detection

02 Progress tracking Get real-time scroll progress (0-1) as CSS variables or JavaScript events. Perfect for progress bars, scroll-driven animations, or custom interactions.

Progress tracking

02 Parallax effects Create smooth parallax effects instantly with a single data-scroll-speed attribute. No complex setup, no math, just add a number and it works.

Parallax effects

Features

Locomotive Scroll is a thin, opinionated wrapper around Lenis. You get all of Lenis's power plus our detection and animation layer.
Visit Lenis website
Visit Locomotive website
01

Native scrollbar

Real browser scrollbar. No fake alternatives. Accessible, performant, and familiar to users.

02

Smooth easing

Configurable lerp, duration, and custom easing functions thanks to Lenis options.

03

CSS sticky

Works perfectly with position: sticky. No conflicts, no workarounds.

04

Intersection Observer API

Browser-native detection. No polling, no performance hits, just efficient viewport tracking.

05 Scroll to Programmatic scrolling to any element, selector, or pixel value via Lenis. Supports offset, duration, and custom easing.
06

Scroll direction

↓ ↑

Track direction changes in real-time thanks to Lenis. Perfect for hiding/showing headers or reversing animations.

07

No layout shifts

No more greedy CSS transforms breaking your layouts. Plays nice with position: sticky, fixed headers, and existing CSS.

Real projects built with Locomotive Scroll by leading studios and developers.

Showcase