locomotive-scroll

Locomotive Scroll is a JavaScript library that adds smooth scrolling and scroll-based animation effects to websites. Instead of the browser's default abrupt jump when a user scrolls, this library makes the page glide more fluidly. It also lets developers trigger animations or apply parallax effects to individual page elements as the user scrolls past them.

Parallax means different parts of the page move at different speeds while scrolling, creating a sense of depth. For example, a background image might drift slowly while the text in front of it moves at normal speed. You control this by adding simple HTML attributes to elements on the page, specifying how fast each one should move relative to the scroll position.

The library detects when elements come into or leave the visible area of the screen, which lets developers fire animations or class changes at the right moment. It is built on top of another library called Lenis, which handles the core smooth scrolling math. The README notes that parallax is automatically turned off on touch devices, where smooth scrolling can conflict with native mobile behavior.

At 9.4 kilobytes compressed, it is designed to add minimal weight to a page. It is written in TypeScript, meaning it includes type definitions that help catch errors when using it in a development environment. Installation is through npm, the standard JavaScript package manager, and full documentation is available on the project's website.