Open-source alternatives to React Awesome Reveal

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

AOS is a scroll-triggered animation library that controls the execution, timing, and mapping of CSS transitions based on element visibility and browser viewport intersections. It functions as a DOM element animation controller and a viewport intersection trigger to initiate visual transitions as elements enter the screen. The library utilizes a custom CSS transition bridge to map scroll-based triggers to CSS class changes, enabling integration with external styling frameworks. It supports anchor-based animation triggers, allowing the visibility of one page element to act as the trigger point

Locomotive Scroll is a JavaScript library and toolkit for managing DOM scroll interactions, featuring a smooth scroll motion controller and a parallax scrolling engine. It provides a system for implementing fluid scrolling and tracking element visibility within the viewport. The library creates depth and motion by moving elements at different speeds relative to the scroll position. It includes a viewport visibility tracker used to initiate visual transitions and animations when specific elements enter the browser viewport. The toolkit covers programmatic scroll control, dynamic element regis

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 project is a transition component library for React that manages CSS animations during the mounting and unmounting of components. It functions as a CSS class state manager and animation orchestrator, applying specific class sequences to track the entry and exit states of elements. The library coordinates the timing and sequence of multiple elements entering or leaving the screen. This includes managing synchronized group transitions for lists and triggering visual animations when switching between different URL routes. The system covers a range of transition capabilities, including stat

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

in-view is a DOM visibility detector and intersection observer wrapper. It serves as a viewport transition handler that triggers callbacks and events when specific screen elements enter or exit the browser window. The library provides a system for configuring visibility criteria using pixel offsets, percentages, or custom test functions. It includes utilities for observing visibility changes, performing manual visibility evaluations, and checking the current status of an element within the visible area. These capabilities support application patterns such as lazy loading, infinite scrolling,

react-motion is a physics-driven animation toolkit and library for React applications. It provides a system for creating fluid user interface transitions by simulating natural spring movement to move elements toward destination values using stiffness and damping parameters. The framework manages the visual entry and exit of components as they mount and unmount within the document structure. It coordinates complex motion patterns, including staggered animations and fluid transitions for items being added, removed, or reordered within dynamic lists. The library covers a broad range of animatio

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

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

Animate Components is a motion framework that provides a collection of declarative primitives for managing visual transitions and animation sequences within web applications. It functions as a component-based library designed to standardize motion behavior, ensuring that interface elements move and transition consistently across different parts of a project. The library distinguishes itself through a framework-neutral architecture that bridges animation logic with various component models. By utilizing a declarative interface, it allows developers to compose complex motion patterns and synchr

Motion is a high-performance animation library that provides a unified, declarative architecture for managing visual transitions and motion states across web interfaces. By utilizing a lightweight engine, it allows developers to define complex animations through component properties rather than manual DOM manipulation, ensuring consistent behavior across various component-based frameworks and vanilla JavaScript environments. The library distinguishes itself through a sophisticated physics-based motion engine that simulates natural movement using mass, damping, and stiffness parameters. It inc

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

This project is a cross-platform mobile animation library and component wrapper that enables movement and style transitions for mobile UI elements. It functions as a keyframe animation engine and a preset motion library, allowing developers to apply visual effects to components through a declarative API. The library provides a set of built-in entrance, exit, and alert effects for rapid implementation. It also supports the definition of custom motion sequences and unique keyframes to create repeatable, branded visual experiences. The system covers a range of motion capabilities, including the

csshake is a CSS animation library and framework designed to create shaking, vibrating, and oscillating movement effects on DOM elements. It functions as a UI feedback component that uses visual motion patterns to signal errors or draw user attention through irregular element movement. The library provides multi-axis shake effects, including horizontal, vertical, and rotational motion patterns. These are implemented through class-based triggering mechanisms that allow for the delivery of error-signaling patterns and other attention-grabbing effects. The system covers a range of animation con

react-waypoint is a set of React components and wrappers designed to execute callbacks when specific DOM elements enter or exit the visible screen area. It functions as a viewport visibility tracker that monitors when elements cross predefined spatial boundaries. The project provides a scroll trigger component and event wrapper that allow for custom offset configurations to account for fixed UI elements. These tools can be configured to use a specific DOM node or the global window as the scrollable ancestor for visibility calculations. The library covers several implementation patterns, incl

Vue is a progressive, component-based JavaScript framework designed for building reactive user interfaces and single-page applications. It centers on a declarative template system that transforms HTML into efficient render functions, allowing developers to organize complex interfaces into isolated, reusable units that synchronize automatically with application state. The framework distinguishes itself through a dependency-tracking reactivity system that monitors data access during rendering to trigger precise updates. It provides a flexible architecture that supports both incremental adoption

bounce.js is a JavaScript library and programmatic wrapper for generating and applying CSS3 keyframe animations and 3D transformations. It provides a tool for creating complex animation sequences without the need to write manual stylesheet rules. The library allows for the creation of animations by chaining scale, rotation, translation, and skew transformations. These generated sequences can be saved under unique names for reuse across multiple elements. The system manages the animation lifecycle through callback functions that trigger when a visual sequence completes. It also includes a com

React-spring is a physics-based animation library designed to create fluid, natural motion for user interface elements and three-dimensional objects. It functions as a declarative motion framework that maps state changes to animated property values, utilizing spring physics—defined by mass, tension, and friction—rather than traditional time-based easing functions to calculate transitions. The library distinguishes itself through a rendering-agnostic architecture that decouples animation logic from specific UI frameworks, allowing for consistent application across web interfaces, 3D scenes, an

react-flip-toolkit is a coordinate-based transition framework and layout animation library for React. It uses a magic-move technique to calculate element positions, preventing jarring jumps during layout shifts through interpolation and physics. The library provides a spring-based motion engine that uses stiffness and damping settings to create natural movement for layout and style changes. It includes specialized tools for shared element transitions, which coordinate visual movements across client-side route changes to maintain continuity between different pages. The system covers layout tr

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

React Move is a declarative animation library for React that animates components by interpolating between start and end states with configurable timing and easing. It provides data-driven transitions for single elements, groups, lists, and SVG elements, supporting staggered timing, custom interpolation for non-numeric values like colors and paths, and drag-and-drop reordering of list items. The library distinguishes itself through its support for custom interpolation functions that replace default numeric interpolation, keyed array reconciliation for tracking items as they enter, update, or l

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

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

Magic UI is a copy-paste UI framework and React animated library providing a collection of interactive, visually dynamic interface components. It serves as a design engineering toolkit that bridges high-fidelity design and production code by offering ready-made components for direct integration into web applications. The library focuses on animated UI development and the implementation of interactive components, utilizing a copy-paste distribution model. This approach allows for rapid prototyping and full local customization without the need to install heavy dependencies. The components are

This project is a Tailwind CSS landing page template and responsive marketing website kit. It serves as a React frontend starter providing a set of pre-designed marketing layouts and components for rapid website development. The kit includes an animated UI component library featuring scroll-triggered transitions and dynamic visual effects. It provides themed page templates and design source files for creating marketing sites, professional portfolios, community portals, admin dashboards, and technical documentation sites. The codebase covers a broad range of interface capabilities, including

Motion Primitives is an animated UI kit and React animation component library designed as a web motion framework. It provides a collection of pre-built, customizable visual components used to implement complex interface animations and transitions within a browser environment. The library focuses on animated user interface design and frontend visual polish. It enables the development of interactive web components and rapid UI prototyping by providing reusable primitives that handle motion effects without requiring custom logic from scratch. The framework integrates Framer Motion for physics-b