locomotive-scroll

GitHub

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

RAW Doc

Repository: locomotivemtl/locomotive-scroll


Stars: 8750

README.md

Locomotive Scroll

![npm version](https://www.npmjs.com/package/locomotive-scroll)
![npm downloads](https://www.npmjs.com/package/locomotive-scroll)
![bundle size](https://bundlephobia.com/package/locomotive-scroll)

A lightweight & modern scroll library for detection, animation, and smooth scrolling. Built on top of Lenis.

Documentation

Full documentation available at scroll.locomotive.ca/docs.

Quick Start

bash
npm install locomotive-scroll

js
import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

css
@import 'locomotive-scroll/dist/locomotive-scroll.css';

html
<div data-scroll data-scroll-speed="0.5">I move at half speed</div>

Features

- Lightweight — Only 9.4kB gzipped
- TypeScript First — Fully typed
- Built on Lenis — Latest stable release with improved performance
- Dual Intersection Observers — Optimized detection for triggers vs. animations
- Smart Touch Detection — Parallax auto-disabled on mobile
- Accessible — Native scrollbar, keyboard navigation, proper ARIA support

Demo

Check out the examples and playground

Support

GitHub Issues