Locomotive® Scroll 5.0 is a lightweight 9.4kB scroll library built on Lenis, offering smooth scrolling, in-view detection, parallax effects, progress tracking, and production-ready performance for modern websites.
Locomotive Scroll (Version 5.0)
Modern websites don’t just scroll. They flow.
That’s exactly what Locomotive Scroll 5.0 delivers — a lightweight scroll library built for modern web experiences. It handles detection, animation, and smooth scrolling in just 9.4kB gzipped. And it now runs on top of Lenis, bringing performance and reliability to the core.
This isn’t just an update.
It’s a complete rewrite.
A Fresh Foundation for Modern Web
Version 5.0 rethinks everything.
The team rebuilt the library from the ground up. They moved away from older approaches and embraced modern workflows. The result feels lighter, cleaner, and more production-ready.
Over the years, Locomotive Scroll evolved dramatically:
- From jQuery to vanilla ES6
- From custom scroll engines to Lenis
- From experimental setups to stable production tools
Now, it stands on a solid foundation — optimized, accessible, and developer-friendly.
Built on Lenis — And Better Because of It
Locomotive Scroll acts as a thin, opinionated wrapper around Lenis.
You get the power of Lenis smooth scrolling. Then you add Locomotive’s detection and animation layer on top.
That means:
- Configurable easing
- Custom duration and lerp
- Scroll direction tracking
- Programmatic scroll-to controls
All without fighting your layout.
And yes, no more greedy CSS transforms breaking position: sticky.
Lightweight but Powerful
At just 9.4kB gzipped, Version 5.0 proves you don’t need heavy libraries for immersive scroll experiences.
It works with:
- Native browser scrollbars
- Keyboard navigation
- SPA cleanup cycles
- Proper accessibility defaults
No fake scrollbars. No hacks. No layout shifts.
Just real browser behavior — enhanced.
TypeScript First Approach
Version 5.0 embraces TypeScript fully.
You get:
- Full type safety
- Cleaner autocomplete
- Fewer runtime bugs
- Happier developer workflows
It feels modern because it is modern.
Smarter Performance with Dual Intersection Observers
Scrolling interactions often waste performance cycles.
Locomotive Scroll fixes that.
It uses dual Intersection Observers:
- One for simple triggers
- One for continuous animations
That means no unnecessary requestAnimationFrame loops.
No polling.
Just native browser performance.
Efficient. Predictable. Smooth.
Smart Touch Detection
Mobile deserves better treatment.
Locomotive Scroll automatically disables parallax effects on touch devices. This keeps performance stable and avoids awkward motion.
Want parallax on mobile?
Just opt in with a single attribute.
Control stays in your hands.
Built-In Tools That Save Time
Locomotive Scroll doesn’t just smooth scrolling. It gives you practical tools that speed up real-world development.
01 — In-View Detection
Trigger animations, add classes, or fire custom events when elements enter the viewport.
It uses the native Intersection Observer API. So performance stays high.
02 — Progress Tracking
Track real-time scroll progress from 0 to 1.
You can:
- Bind it to CSS variables
- Listen via JavaScript events
- Build progress bars
- Create scroll-driven animations
It opens up creative possibilities without complex math.
03 — Parallax Effects
Add a single attribute:
data-scroll-speed="2"
And you’re done.
No calculations. No custom scripts. Just smooth parallax.
Core Features That Matter
Version 5.0 focuses on practical power:
Native Scrollbar
You keep the real browser scrollbar. Users stay comfortable. Accessibility remains intact.
Smooth Easing
Customize duration, lerp, and easing functions via Lenis options.
CSS Sticky Support
It works perfectly with position: sticky. No hacks. No overrides.
Scroll-To Control
Scroll programmatically to any element, selector, or pixel value. Add offsets and custom easing.
Scroll Direction Tracking
Detect direction changes in real time. Perfect for hiding headers or reversing animations.
No Layout Shifts
Your layouts stay stable. Fixed headers behave properly. Sticky elements stick correctly.
Real Projects, Real Impact
Leading studios and developers use Locomotive Scroll in production.
Some notable implementations include:
- Locomotive
- Scout Motors
- Lightship
- Vooban
- Troa
These aren’t experimental playgrounds.
They are polished, production-grade digital experiences.
Easy Installation
Getting started takes seconds:
npm install locomotive-scrollVersion 5.x integrates cleanly into modern frontend stacks.
Then you enhance your markup with attributes like:
data-scrolldata-scroll-speeddata-scroll-classdata-scroll-repeatdata-scroll-positiondata-scroll-calldata-scroll-event-progress
Simple attributes. Powerful results.
Production-Ready by Default
Many scroll libraries look impressive in demos but break in real projects.
Version 5.0 avoids that trap.
It:
- Cleans up properly in SPAs
- Maintains accessibility
- Preserves native behaviors
- Respects performance constraints
It feels stable because it was built for production from day one.
Final Thoughts
Locomotive Scroll 5.0 represents maturity.
It keeps the elegance of smooth scrolling.
It removes unnecessary complexity.
It embraces modern browser APIs.
It respects performance and accessibility.
And it does all that in just 9.4kB.
If you want smooth scrolling with control, precision, and production reliability — Locomotive Scroll 5.0 delivers.
Made by Locomotive.
Built for modern web experiences. 🚀
