github.com/locomotivemtl/locomotive-scroll

Warning

Locomotive Scroll v.5 is currently in beta. Be prepared for breaking changes compared to previous versions.

Locomotive Scroll v.5

Detection of elements in viewport & smooth scrolling with parallax effects.

Locomotive Scroll is an opinionated JavaScript library that provides smooth scrolling animations and advanced scroll interactions for web applications. It is designed to create engaging and interactive scrolling experiences with ease. Locomotive Scroll offers features such as smooth scrolling, parallax effects and scroll-based animations.

Read the documentation for more details.

Installation

You can install it via NPM by running the following command:

npm install locomotive-scroll@beta

Find more ways to install the package in our Quick start guide.

Features

Name	Support	Description
Lenis	✅	Built on top of Lenis.
TypeScript	✅	For a better developer experience
Built-in viewport detection	✅	Using browsers's native Intersection Observer API
Real time progress value	✅	For flexible scroll-based animation
Accessibility and performance	✅	More than ever!
Lightweight	✅	8.3KB (gzip)

Dependencies

Name	Description
Lenis	How smooth scroll should be.

Related

• Lenis
• Modularjs
• Locomotive Boilerplate 🚂