Locomotive Scroll

Comprehensive guide for implementing smooth scrolling, parallax effects, and scroll-driven animations using Locomotive Scroll.

Version & Status

Current: v5.0.1 (Jan 2026). v5 is a complete rewrite built on top of Lenis — 9.4kB gzipped, TypeScript-first, no more data-scroll-container/data-scroll-section wrapper markup or CSS-transform scrolling. Actively maintained (8.8k stars, recent releases).

Patterns below are v5 (current) unless marked Legacy (v4). Older production codebases still on v4 will use the container/section markup and scrollerProxy GSAP pattern — those are preserved under Legacy headings.

Overview

Locomotive Scroll is a JavaScript library that provides:

• Smooth scrolling: Hardware-accelerated smooth scroll with customizable easing
• Parallax effects: Element-level speed control for depth
• Viewport detection: Track when elements enter/exit viewport
• Scroll events: Monitor scroll progress for animation synchronization
• Sticky elements: Pin elements within defined boundaries
• Horizontal scrolling: Support for horizontal scroll layouts