explaingit

alexfoxy/lax.js

★ 10,487JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A tiny JavaScript library under 4KB that adds scroll-triggered animations, fade, slide, spin, inertia, to any web page with no dependencies, using simple class names or a driver-and-element API.

Mindmap

mindmap
  root((lax.js))
    Core concepts
      Drivers
      Elements
      Mappings
      Inertia
    Presets
      Fade in
      Slide
      Spin
    Framework support
      Vanilla HTML
      React
      Vue
    Features
      Breakpoints
      onUpdate callback
      No dependencies
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add scroll-triggered fade-in and slide effects to a landing page by adding preset class names to HTML elements.

USE CASE 2

Create animations driven by mouse cursor position or any custom value using the driver API.

USE CASE 3

Make page elements feel weighted and laggy as the user scrolls using the inertia feature.

USE CASE 4

Apply different animation behaviors on mobile vs desktop using lax.js breakpoints.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

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.

Copy-paste prompts

Prompt 1
I want to add a scroll-triggered fade-in to my hero section using lax.js. Show me the minimal HTML and JavaScript setup with no build step.
Prompt 2
How do I stack multiple lax.js presets on one element to make it slide in and fade in at the same time?
Prompt 3
I am using lax.js in a React component. How do I add and remove elements on component mount and unmount?
Prompt 4
How do I create a custom lax.js driver that animates an element based on mouse cursor X position instead of scroll?
Open on GitHub → Explain another repo

← alexfoxy on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.