Skip to content
Get packs

lax.js

A small vanilla JavaScript library for scroll-driven animations, under 4kb gzipped. Archived.

GitHub Download v2.0.3
Stars
10.5k
Forks
480
Licence
MIT
Language
JavaScript
Last update
1.5 years ago
Type
Library

This repository is archived and no longer maintained.

What it is

lax.js is a small JavaScript library that animates HTML elements based on values such as scroll position, and can also use mouse position or time. You define a driver that supplies a number, then map that number to CSS properties like opacity or translateX. It is written without a framework and is described as under 4kb gzipped. The project has been archived, so the maintainer no longer updates it.

  • Fade in or translate sections of a landing page as the visitor scrolls
  • Create horizontal snap-scroll sections using the provided examples as a starting point
  • Play a sprite or GIF frame sequence based on scroll position
  • Update HTML content or toggle classes on an element as a driver value changes

Great for

  • Developers adding simple scroll-linked effects to a static site or plain HTML page
  • Developers who want a small dependency and do not use a large animation framework
  • Developers who want fade, spin or parallax effects through HTML classes using presets
  • Developers experimenting with inertia or cursor-driven animation on web pages

Not ideal for

  • Teams starting a new production project, because the repository is archived and the maintainer says it is no longer maintained and newer alternatives likely exist
  • Non-developers who need a visual tool without writing JavaScript
  • Projects that need active bug fixes or security updates, since none are promised

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js or Yarn if installing from npm (not stated in the README)

    Install from npm

    npm install lax.js

    Install with Yarn

    yarn add lax.js
  2. 2

    Run it

    • Add the script tag or import lax from 'lax.js' in your page
    • Call lax.init() once the window has loaded
    • Add a driver with lax.addDriver('scrollY', function () { return window.scrollY })
    • Attach animation bindings to elements with lax.addElements('.selector', { ... })
  3. 3

    Get the most out of it

    • Use presets through HTML classes such as lax_preset_fadeIn, and chain several together
    • Set frameStep on drivers or animations to reduce update frequency for performance
    • Enable inertiaEnabled on a driver and use the inertia option to add momentum to elements
    • Call lax.addElements and lax.removeElements when using React, Vue or similar frameworks that add components after load
    • Use the Preset Explorer to try effects before writing code

Downloads

Source code (.zip)dev branch · straight from GitHubRelease v2.0.3Release notes and source

Strengths

  • Small size, stated as under 4kb gzipped
  • No framework required; works with plain HTML and a script tag or npm install
  • Flexible: custom drivers, value maps, easings and presets let you build different effects

Trade-offs

  • Archived by its author, so there are no planned fixes; the README says it still works but newer alternatives are likely better
  • Documentation is partly incomplete (framework examples for Vue and Angular were marked as coming soon)
  • Requires understanding of drivers and value maps, which takes some learning for beginners

How it compares

ProjectStarsTypeLevelUpdatedBest for
lax.js (this)10.5kLibraryintermediate1.5 years agoDevelopers adding simple scroll-linked effects to a static site or plain HTML page
anime74.2kLibrarybeginner3 months agoFront-end developers adding motion to websites or web apps
barba13kLibraryintermediate1.9 years agoDevelopers adding animated transitions to an existing multi-page website
bootstrap175kLibrarybeginner4 days agoDevelopers building responsive websites or web app interfaces quickly
tailwindcss98.3kLibraryintermediate4 days agoWeb developers who build their own interfaces and want to avoid writing large custom stylesheets
normalize.css53.5kLibrarybeginner2.4 years agoFront-end developers who want a consistent starting point across browsers

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.