lax.js

lax.js is a small JavaScript library (under 4 kilobytes when compressed) that adds scroll-triggered animations to web pages without requiring any other libraries or frameworks. When a visitor scrolls down a page, elements can fade in, slide sideways, spin, or shift in any direction, all controlled by how far the page has scrolled.

The core idea is a "driver and element" model. A driver is any value that changes over time, most commonly the vertical scroll position of the page but also mouse cursor position, time of day, or anything else you can express as a number. You attach that driver to page elements and define how a CSS property like opacity, translateX, or rotation should change as the driver value changes. The library calculates a mapping between the driver number and the visual output number every frame, so the animation stays in sync with whatever is driving it.

For developers who want quick results without writing custom mappings, the library ships with presets that you apply by adding class names directly to HTML elements. A single class name like lax_preset_fadeIn can make an element fade in as it scrolls into view. Multiple presets can be stacked on one element. An interactive preset explorer is linked in the documentation for browsing the available effects.

Version 2.0 was a complete rewrite that added inertia, which makes elements feel like they have weight and lag slightly behind the scroll movement before catching up. It also added breakpoints so animations can behave differently on small versus large screens, and an onUpdate callback that fires every frame with the current driver values, useful for toggling CSS classes or updating text based on scroll position.

The library works with plain HTML pages and also with React, Vue, and other component frameworks, though those require calling the add and remove element methods when components mount and unmount rather than relying on the initial page load scan.