Open-source alternatives to Scrollreveal

This is a React animation library providing a collection of components for creating choreographed motion, complex transitions, and SVG morphing. It functions as a motion design specification and a UI component animation wrapper system used to apply 3D transforms, Bezier curves, and entry-exit transitions to interface elements. The project includes a scroll-driven animation suite for synchronizing UI movements and parallax effects with the viewport position, as well as an SVG motion framework for animating paths, drawing lines incrementally, and interpolating coordinates for shape morphing. I

ScrollTrigger is a JavaScript library and DOM scroll event manager designed to execute callbacks and toggle CSS classes when elements enter or exit the browser viewport. It functions as a high-level interface for the Intersection Observer API and a system for initiating visual transitions and asynchronous tasks based on an element's position relative to the viewport. The tool allows for the definition of precise trigger points using pixel or percentage offsets to control exactly when events fire. It manages scroll-driven visual animations and lazy loading implementations by tracking visibilit

react-waypoint is a React component and viewport tracking tool that executes functions based on the visibility of a DOM node within a scrollable area. It monitors when elements enter or leave the browser viewport or a specified scroll container to trigger callbacks. The project enables the implementation of infinite scrolling, asset lazy loading, and scroll-triggered animations. It allows for custom scroll container definitions and viewport boundary configurations using offsets to determine exactly when events fire. The tool provides element position tracking and visibility monitoring for bo

Sal is a lightweight vanilla JavaScript library designed to trigger CSS animations and execute custom logic as elements enter the browser viewport. It serves as a programmatic wrapper for the Intersection Observer API, providing a viewport trigger system to handle visibility thresholds and scroll-based animations. The library operates as a dependency-free frontend tool that manages animations through a class-based trigger mechanism and the injection of CSS custom properties. It includes a system for tracking dynamic content, allowing the observer to be updated to include new elements injected

react-intersection-observer is a React implementation of the Intersection Observer API designed to track when DOM elements enter or leave the browser viewport. It provides a wrapper and a set of hooks for monitoring element visibility and triggering callbacks when content becomes visible to the user. The library includes a mechanism for DOM occlusion detection to determine if an element is covered by other components or hidden by CSS filters. It also features a polyfill wrapper that provides visibility fallbacks for browsers that do not natively support intersection observer capabilities. Th

ScrollMagic is a DOM scroll interaction framework and animation engine used to map scroll progress to callbacks and visual effects. It functions as a library for triggering animations based on a user's scroll position and the proximity of elements to the viewport. The framework employs a plugin-based system to extend core behavior and customize how elements react during movement. This allows for the development of non-standard scrolling interactions and interactive storytelling experiences where content transitions are tied to the scroll position. The system provides capabilities for viewpor

Motion is a declarative animation framework designed for Vue applications. It provides a system for defining complex visual states and element transformations through an object-based syntax, allowing developers to manage interface motion directly within component templates. The library distinguishes itself by utilizing a physics-driven engine that calculates frame-by-frame values using spring-based mathematical models. This approach enables natural movement and fluid transitions between visual states without the need for manual keyframe management. By leveraging a fine-grained reactivity syst

WOW is a JavaScript library and animation engine designed to trigger CSS animations when elements enter the browser viewport during page scrolling. It serves as a tool for orchestrating visual transitions based on the user's scroll position and element visibility. The library functions as a dynamic content animation tool, capable of detecting and animating new elements added to the page after the initial load. This allows visual effects to be applied to dynamically injected content without requiring a page refresh. The system utilizes the Intersection Observer API to detect viewport entry an

Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys

jQuery Parallax is a frontend animation library and JavaScript plugin that creates a multi-layered depth illusion as users scroll down a web page. It operates by shifting background layers at varying speeds during page scrolling to simulate differing visual depths. The library calculates background element offsets relative to the current scroll position of the viewport to dynamically adjust placement. It attaches native browser scroll event handlers to trigger coordinate recalculations and layout updates in real time, directly updating the inline styles of element background image coordinates

This project is a collection of experimental frontend prototypes, comprising a creative web layout gallery, a CSS user interface component library, and a visual experiment lab. It serves as an interactive animation showcase for holographic effects, audio-visual synthesis, and dynamic state transitions. The repository features specialized implementations of interactive media, including physics-based particle systems, real-time audio-visual synthesis, and an interactive sketching system. It also includes tools for content generation, such as text-based image reconstruction and a web-based prese

GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and interactive user interfaces. It provides a robust property-interpolation engine that calculates intermediate values for CSS styles, attributes, and numeric properties, enabling smooth visual transitions across web elements. The framework is built on a core architecture that manages animation lifecycles, timeline-based sequence orchestration, and virtual property interception to ensure precise control over motion. The library distinguishes itself through a modular, plugin-based extensib

This project is a Tailwind CSS animation library and accessibility-aware motion framework. It provides a collection of utility classes for adding high-performance keyframe animations and motion effects to web projects, while automatically respecting user-defined reduced motion preferences. The system includes a browser-based animation designer for creating and exporting custom presets as CSS styles or utility classes. It also functions as a scroll-triggered animation framework, enabling entrance and exit transitions that execute as elements enter the viewport, including support for staggered

JazzHands is a UIKit framework providing a scroll-driven animation engine and a paging layout manager. It enables the binding of view properties to timelines of keyframes, allowing visual transitions to be synced with real-time scroll offsets or gesture data. The project distinguishes itself through a value-interpolation engine that calculates intermediate property states. This allows animation progress to be driven by external input values, mapping view attributes to a timeline based on a floating point progress indicator. The framework also includes a system for organizing views within pag

Scroll-timeline is a JavaScript library and standards-based browser polyfill that implements scroll-driven animations and scroll timelines for environments lacking native platform support. It links web animations and CSS animations directly to the user's scroll position or element visibility instead of time, enabling fluid visual effects tied to page movement. The library supports scroll-driven page effects such as scaling image dimensions, panning background positions across large visual elements, and revealing transitions between visual states progressively as the user scrolls. It also trig

This project is a comprehensive CSS animation tutorial and a structured frontend animation course. It serves as a web motion learning resource designed to teach the implementation of visual transitions and animations within a browser. The resource provides a guide to CSS 3D animation, covering the rendering of three-dimensional scenes and depth. It includes instructions on motion design, ranging from scroll-triggered animations and sprite sheet animation to the creation of complex web interface animations. The material covers core capabilities such as manipulating element geometry, controlli

ScrollReveal is a JavaScript library designed to manage scroll-triggered visual transitions for web elements. It functions as a framework for tracking element visibility relative to the browser viewport, allowing developers to apply declarative animation sequences as users scroll through a page. The library provides centralized control over motion design by maintaining a global configuration registry that merges with local element settings to ensure consistent behavior. It distinguishes itself through its lifecycle management capabilities, which include the ability to stagger the reveal of mu

Skrollr is a dependency-free scroll-driven animation engine and cross-platform frontend library. It functions as a toolkit for linking CSS properties and HTML attributes to scroll positions to create synchronized animations, specifically providing utilities for the interpolation of SVG attributes. The library enables the creation of parallax scrolling and interactive web storytelling by mapping scroll offsets to specific style values. It allows for the development of non-linear movement and dynamic SVG effects through the use of custom HTML attributes that define keyframes. The system covers

This is a personal portfolio website that uses scroll position to drive complex SVG scene animations, creating an interactive storytelling experience. The project is built around a scroll-synchronised animation controller that maps user scrolling to a timeline of interpolated state changes across a directed graph of visual elements, enabling fluid scene transitions. The site features a real-time animation state debugger that overlays a live HUD showing timing, active elements, and scene breakdown, with console commands for scene jumping and state export. It also includes a gradient-preserving

Lax.js is a lightweight JavaScript library designed for creating scroll-driven animations and interactive motion effects on web pages. It functions as a frontend interaction framework that enables developers to apply dynamic visual transformations to elements as they enter or exit the viewport. The library distinguishes itself by decoupling animation logic from core scripts through a declarative mapping system that utilizes data attributes. It processes scroll progress through a functional pipeline, mapping vertical offsets to specific CSS property ranges using linear interpolation to ensure

This library provides a collection of component-based wrappers designed to automate element entrance animations within web interfaces. By utilizing the browser's intersection observer capabilities, it tracks element visibility to trigger visual transitions automatically as content enters the viewport. The library distinguishes itself through declarative orchestration, allowing for the creation of sequential and staggered reveal patterns across groups of elements. It manages the animation lifecycle by dynamically injecting CSS keyframes into the document, ensuring that motion effects are appli

layzr.js is a JavaScript image lazy loading library designed to improve initial page load speed by delaying the download of images until they enter the browser viewport. It functions as a responsive image selector that identifies the most appropriate image source based on browser support and device pixel ratio. The library employs a system for responsive image delivery that evaluates data attributes to select optimal sources. It includes a mechanism for dynamic content tracking, which monitors the document for newly added images to ensure they are automatically added to the loading queue. Th

This project is a React lazy loading component designed to improve frontend performance by deferring the rendering of child elements until they enter the browser viewport. It functions as a resource lifecycle manager and visibility trigger, preventing unnecessary mounts of off-screen components to reduce initial page load times and memory usage. The library provides configuration for visibility triggers, allowing the use of custom offsets and specific scroll containers to determine when a component loads. It includes mechanisms for managing component lifecycles, enabling the choice of whether

vue-lazyload is a Vue.js image lazy loading plugin and frontend asset optimizer. It serves as a viewport visibility observer that defers the loading of images and components until they enter the browser viewport to reduce initial page load times. The project functions as a progressive image loader by managing image placeholders and implementing dynamic source switching. It uses a browser API to monitor when elements enter the viewport, avoiding expensive scroll event listeners to maintain performance. The plugin provides capabilities for image loading state tracking, including custom placeho

This library provides a set of React components designed to improve initial page load performance by deferring the rendering of images and other elements until they enter the browser viewport. By managing content visibility and asset delivery, it reduces unnecessary network data usage and accelerates page rendering. The project distinguishes itself through its use of the browser-native intersection observer to track element visibility, which eliminates the need for manual scroll calculations. It further optimizes performance by consolidating event listeners into a single parent component, min

Rellax is a dependency-free vanilla JavaScript library and frontend utility used to create parallax web design effects. It functions as a scroll-based animation tool that moves page elements at different speeds to produce a sense of depth and layered motion. The library supports both vertical and horizontal parallax tracking for panoramic layouts and allows for motion speed control. It includes breakpoint-aware speed mapping to adjust movement based on screen width and provides viewport centering to position elements relative to the center of the screen. Beyond basic motion, the tool manages

Responsively-lazy is a library designed to optimize web performance by deferring the loading of off-screen assets until they are required by the user. It functions as a utility for reducing initial page payloads by delaying the rendering of images, background images, and HTML content until elements enter the browser viewport. The library distinguishes itself through its automated handling of dynamic content. By utilizing a mutation observer, it monitors the document tree for new elements added after the initial page load and applies lazy loading behaviors to them without requiring manual re-i