Awesome GitHub RepositoriesReact Animation Libraries

Framer Motion is a React animation library and hardware-accelerated motion engine. It provides a suite of systems for managing declarative transitions, automated layout interpolation, and animation states within React user interfaces. The project distinguishes itself through a layout transition orchestrator that automatically interpolates visual changes when elements shift position or size. It includes an interactive gesture system to trigger motion based on drags, hovers, and taps, as well as tools for binding animation progress to scroll positions. The library covers a broad range of motio

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

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

SVGR is a tool that transforms static SVG files into reusable React components for direct rendering within user interface trees. It functions as an AST-based code transformer and build-time asset pipeline, parsing SVG XML into an abstract syntax tree to modify elements before generating JavaScript source code. The project integrates an external optimization engine to strip redundant metadata and minify attributes, ensuring vector images are flexible and easy to style. It uses recursive tree traversal to apply these transformations to all nested graphic elements and employs attribute mapping t

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

tsparticles is a JavaScript particle engine and canvas visual effects toolkit used to create animated particle systems, interactive backgrounds, and web animations. It functions as a web animation library that provides a set of compatible wrappers for integration into React, Vue, Angular, and Svelte applications. The engine includes pre-built animation patterns for celebratory effects, such as confetti explosions and fireworks. It allows for the creation of custom JavaScript visualizations through a plugin system that enables the development of specialized shapes and behaviors. The toolkit s

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

Motion Primitives est un kit d'interface utilisateur animé et une bibliothèque de composants d'animation React conçue comme un framework de mouvement web. Il fournit une collection de composants visuels pré-construits et personnalisables utilisés pour implémenter des animations d'interface complexes et des transitions dans un environnement de navigateur. La bibliothèque se concentre sur la conception d'interface utilisateur animée et le polissage visuel frontend. Elle permet le développement de composants web interactifs et le prototypage rapide d'UI en fournissant des primitives réutilisables qui gèrent les effets de mouvement sans nécessiter de logique personnalisée à partir de zéro. Le framework intègre Framer Motion pour les transitions basées sur la physique et utilise Tailwind CSS pour le stylage. Il emploie une abstraction basée sur les composants et des définitions de type TypeScript pour assurer des contrats structurels pour les propriétés des composants.

Il s'agit d'une bibliothèque d'animation React fournissant une collection de composants pour créer des mouvements chorégraphiés, des transitions complexes et du morphing SVG. Elle fonctionne comme une spécification de design de mouvement et un système de wrapper d'animation de composants UI utilisé pour appliquer des transformations 3D, des courbes de Bézier et des transitions d'entrée-sortie aux éléments d'interface. Le projet inclut une suite d'animation pilotée par le défilement pour synchroniser les mouvements de l'UI et les effets de parallaxe avec la position de la fenêtre d'affichage, ainsi qu'un framework de mouvement SVG pour animer des chemins, dessiner des lignes progressivement et interpoler des coordonnées pour le morphing de formes. Ses capacités couvrent un large éventail de mouvements visuels, incluant des effets visuels 3D comme des carrousels rotatifs, le mouvement de visualisation de données pour l'interpolation numérique et des assemblages de pages d'atterrissage interactifs. Elle gère également des animations de composants complexes pour les tableaux et les listes, et fournit des outils pour séquencer et enchaîner des animations pour plusieurs éléments.

react-flip-toolkit est un framework de transition basé sur les coordonnées et une bibliothèque d'animation de mise en page pour React. Il utilise une technique de "magic-move" pour calculer les positions des éléments, empêchant les sauts brusques lors des changements de mise en page grâce à l'interpolation et à la physique. La bibliothèque fournit un moteur de mouvement basé sur des ressorts qui utilise des paramètres de rigidité et d'amortissement pour créer un mouvement naturel pour les changements de mise en page et de style. Elle inclut des outils spécialisés pour les transitions d'éléments partagés, qui coordonnent les mouvements visuels à travers les changements de route côté client pour maintenir la continuité entre différentes pages. Le système couvre les animations de transition de mise en page et l'interpolation de propriétés hors mise en page. Il gère le timing via le séquençage d'animation décalé et inclut la neutralisation de transformation pour empêcher les éléments enfants de se déformer lorsqu'un conteneur parent change d'échelle. Le framework fournit également des déclencheurs de rappel d'animation pour exécuter une logique à des jalons spécifiques du cycle de vie.

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

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

Animate Components est un framework de mouvement qui fournit une collection de primitives déclaratives pour gérer les transitions visuelles et les séquences d'animation au sein des applications web. Il fonctionne comme une bibliothèque basée sur des composants conçue pour standardiser le comportement du mouvement, garantissant que les éléments d'interface se déplacent et effectuent des transitions de manière cohérente dans différentes parties d'un projet. La bibliothèque se distingue par une architecture neutre vis-à-vis du framework qui relie la logique d'animation à divers modèles de composants. En utilisant une interface déclarative, elle permet aux développeurs de composer des modèles de mouvement complexes et de synchroniser le timing avec les cycles de vie des composants. Cette approche garantit que les transitions visuelles sont étroitement couplées au processus de rendu, gérant automatiquement le démontage des éléments une fois qu'une séquence d'animation se termine pour maintenir une structure de document propre. Au-delà de ses capacités d'orchestration de base, le projet inclut des outils pour générer des définitions de style autonomes. Ces générateurs d'images clés (keyframes) permettent aux modèles de mouvement d'être exportés pour une utilisation avec des bibliothèques de style externes et des solutions CSS-in-JS, facilitant une image de marque visuelle cohérente dans divers environnements de développement.