Awesome GitHub RepositoriesDeclarative UI Motion Frameworks

react-spring is a declarative animation framework for React that drives visual transitions through state-driven declarations. It functions as a motion engine where animations are defined as target values pursued by a physics engine based on application state. The library utilizes a spring physics engine to calculate natural movements by simulating mass, tension, and friction instead of relying on fixed durations. To maintain high frame rates, it updates DOM elements directly via references to bypass the standard React render cycle. The framework covers physics-based motion and state-driven t

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-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

lottie-react-native is a library for rendering Lottie JSON animations as native graphics within a cross-platform mobile framework. It serves as a JSON-based animation renderer that parses design-exported files into high-performance vector animations on mobile devices. The framework uses a GPU-accelerated vector animation implementation to offload rendering to the device processor, reducing CPU load to maintain smooth motion. It provides a cross-platform motion framework for controlling animation playback, layout scaling, and dynamic color modifications across different mobile screens. The li

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

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

Motion-vue is a declarative animation library for Vue that provides a framework for building fluid, high-performance user interface motion. It enables developers to define complex animation states and transitions using code-based variants and spring-driven physics, ensuring that visual updates remain synchronized with component lifecycles and application state. The library distinguishes itself through a layout projection engine that tracks element coordinates to animate transitions between layout states, and a gesture-driven input pipeline that maps pointer and scroll interactions to animatio

React-simple-animate is a declarative motion framework designed for building CSS keyframe animations and style transitions within web interfaces. It functions as a utility for orchestrating complex, multi-step visual effects by defining style sequences, timing, and easing properties directly within component logic. The library distinguishes itself through its focus on sequencing and coordination, allowing developers to chain multiple animation instances or group them to execute in specific orders. By utilizing functional hooks and declarative properties, it manages animation lifecycles and st

React Magic Motion is a component-based library for React that automates layout transitions and visual movement. It functions as a declarative animation framework, allowing developers to apply smooth motion to UI elements without the need for manual keyframe management or complex state tracking. The library utilizes a layout-based animation technique that calculates the difference between element positions before and after state changes. By monitoring the component tree and DOM layout, it automatically triggers hardware-accelerated CSS transforms to animate shifts, reordering, and navigation

This library is a declarative framework for creating complex motion sequences and visual transitions within Flutter applications. It provides a unified interface for orchestrating interface element transformations, property updates, and animation lifecycles without requiring manual controller management or boilerplate code. The framework distinguishes itself through a fluent builder pattern that allows developers to chain multiple independent motion effects into a single execution pipeline. It supports advanced visual customization by integrating custom fragment shaders for GPU-accelerated re