Awesome GitHub RepositoriesAnimation Libraries

This project is a high-level 3D graphics engine designed to render complex, hardware-accelerated environments within web browsers. It provides a comprehensive abstraction layer that manages scene graphs, cameras, and lighting, mapping high-level scene definitions onto low-level graphics APIs. By decoupling these definitions from specific hardware targets, the engine ensures consistent performance across diverse browsers and devices. The framework distinguishes itself through a robust architecture that includes a unified math library for high-frequency spatial calculations and a physically bas

Lottie-android is a native vector animation engine and library for Android that parses JSON specification files into high-fidelity animations. It functions as a JSON animation parser and renderer, translating After Effects exported data into native draw calls to maintain design fidelity on mobile devices. The library supports dynamic user interface control by allowing the modification of animation properties, such as colors, text, and shape attributes, during runtime playback. It also integrates with system-level accessibility settings to adjust playback and visibility in accordance with redu

Bodymovin is a motion graphics pipeline tool and plugin that exports After Effects animations into JSON files for native rendering on web and mobile platforms. It serves as a cross-platform animation bridge, converting complex vector motion designs into a portable Lottie format for use across different operating systems and frameworks. The project enables high-performance web animation by rendering motion graphics using SVG, Canvas, or HTML. It ensures consistent playback across diverse environments by converting dynamic expressions into static keyframes during the export process. The toolse

Pop is an animation library for iOS and macOS designed to manage property animations, value interpolation, and physics engines. It functions as a framework for linking animation engines to arbitrary object properties, extending beyond standard view attributes. The library features a physics-based animation engine that generates motion based on velocity, friction, and target values. This system enables the creation of spring and decay animations to simulate real-world dynamics. The project also provides tools for value interpolation using easing curves, display-link driven updates synced to s

This project is a declarative animation library and high-performance engine designed for creating fluid, interactive vector motion graphics on the web. It provides a specialized framework for defining, rendering, and orchestrating complex visual sequences, including custom geometric shapes and dynamic property transitions. The library distinguishes itself through a robust particle system framework that generates explosive or organic visual effects by emitting multiple shapes with randomized trajectories and paths. It utilizes a master timeline controller to synchronize independent animation i

Spring is a Swift animation library and iOS view animation framework. It provides a spring physics animation engine designed to generate realistic, organic motion for user interface movements. The framework utilizes a declarative animation interface, allowing developers to define animation properties and behaviors without writing complex imperative code. This includes a declarative animation workflow where motion is configured through visual storyboards. The system manages iOS UI animations and Swift view transitions, specifically automating how views appear and disappear through triggered a

Material-Animations is a Java-based library for coordinating activity transitions, property animations, and reveal effects within Android mobile user interfaces. It provides a framework for automating visual updates whenever view properties or layout configurations are modified. The project implements high-level patterns for shared element transitions, linking independent views across different sections to simulate a single moving element. It also includes circular reveal masking to unveil content from a specific focal point and coordinate-based view mapping to execute translation and scaling

AndroidViewAnimations is an animation library and visual effects toolkit for Android applications. It provides a framework for implementing motion effects, such as bouncing, sliding, and rotating transitions, for views within Android layouts. The library features a collection of predefined motion presets and stylized transition effects. These include curated sequences for shaking and pulsing to guide user attention, as well as complex movements like hinging or rolling for interface entry and exit. The toolkit covers a wide range of visual effects, including linear slides, elastic bounces, tr

laxxx is a lightweight JavaScript framework for creating scroll-driven animations and DOM element bindings. It functions as a CSS interpolation engine and animation utility that maps numeric driver values to HTML attributes and styles in real time. The framework specializes in linking visual properties to scroll position and velocity, featuring built-in inertia to smooth out transitions and prevent abrupt visual jumps. It utilizes a driver-based system to generate numeric streams from inputs like mouse movement or time, which are then transformed into CSS outputs through easing equations and

Odometer is a JavaScript number animation library and frontend UI tool designed to create fluid counting effects. It functions as a numerical transition component that updates numbers on a page using animated rolling or sliding transitions. The library focuses on numerical value animation and data transition effects, allowing users to transition smoothly between two numerical values. This is used for updating metrics and key performance indicators in dynamic dashboard visualizations to avoid abrupt jumps in data displays.

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

bounce.js est une bibliothèque JavaScript et un wrapper programmatique pour générer et appliquer des animations CSS3 keyframe et des transformations 3D. Il fournit un outil pour créer des séquences d'animation complexes sans avoir besoin d'écrire manuellement des règles de feuille de style. La bibliothèque permet la création d'animations en enchaînant des transformations d'échelle, de rotation, de translation et d'inclinaison. Ces séquences générées peuvent être enregistrées sous des noms uniques pour être réutilisées sur plusieurs éléments. Le système gère le cycle de vie de l'animation via des fonctions de rappel qui se déclenchent lorsqu'une séquence visuelle se termine. Il inclut également un vérificateur de compatibilité pour vérifier si l'environnement du navigateur prend en charge les transformations 3D et les spécifications de keyframe requises.

animateplus est une bibliothèque d'animation JavaScript légère conçue pour créer des transitions visuelles haute performance à 60 FPS et des interpolations numériques pour les éléments de sites web. Elle fonctionne comme un moteur d'animation basé sur les promesses, utilisant des patterns async/await pour séquencer des timelines de mouvement complexes et des délais de temporisation. La bibliothèque inclut un simulateur de flou de mouvement qui applique un flou directionnel le long des axes X et Y pour imiter une vitesse élevée. Elle fournit également un outil d'interpolation numérique pour effectuer des transitions de couleurs et de propriétés graphiques entre différents états. Le système gère le contrôle d'éléments haute performance, permettant de démarrer, arrêter et retarder précisément les animations. Il prend en outre en charge des effets de mouvement dynamiques via des callbacks frame-par-frame qui peuvent déclencher une logique externe pendant la progression d'une animation.

Rebound est un framework de mouvement et un moteur physique Java conçu pour créer des mouvements physiques naturels dans les animations d'interface utilisateur. Il fonctionne comme une bibliothèque de physique à ressorts qui modélise les forces et les oscillations pour piloter des transitions d'interface fluides. Le framework implémente un design de mouvement interactif en simulant des dynamiques de ressorts réelles et des forces physiques plutôt que d'utiliser des transitions linéaires. Cela permet de créer des mouvements organiques au sein des applications Java. Le moteur gère l'animation basée sur la physique via des simulations à ressorts, utilisant une intégration à pas de temps discret et des boucles de mise à jour indépendantes de la fréquence d'images. Il utilise des dynamiques basées sur des paramètres, tels que les ratios de raideur et d'amortissement, ainsi qu'une interpolation de mouvement basée sur l'état pour déterminer la position des éléments de l'UI.

Swup est une bibliothèque de transition de page et un chargeur de page AJAX conçu pour créer des transitions animées fluides entre les pages sur des sites web rendus côté serveur. Il fonctionne comme un orchestrateur de contenu DOM et un gestionnaire d'historique de navigateur, interceptant la navigation pour remplacer dynamiquement le contenu de la page et simuler une expérience d'application monopage. Le projet se distingue par un système de cycle de vie basé sur des hooks et une architecture de plugins qui permet l'injection de logique personnalisée et d'effets d'animation. Il prend en charge des méthodes visuelles avancées, notamment le morphing de contenu DOM, le rendu DOM parallèle pour les animations superposées et l'intégration avec l'API native View Transitions du navigateur. La bibliothèque couvre un large éventail de capacités, notamment la gestion de la navigation côté client, la mise en cache des pages en mémoire et le préchargement des pages en arrière-plan pour optimiser les performances. Elle fournit également une restauration complète de la position de défilement, des optimisations d'accessibilité pour les lecteurs d'écran et des outils pour synchroniser les métadonnées d'en-tête de document et l'exécution de scripts à travers les transitions.

Moti est un framework d'animation multiplateforme et un moteur d'animation piloté par l'état, conçu pour créer des transitions visuelles et des effets de mouvement cohérents sur mobile et web. Il fonctionne comme une bibliothèque et un wrapper d'animation sur thread natif, utilisant un système de valeurs partagées pour synchroniser les changements d'état entre la couche logique et le moteur de rendu natif. Le framework se distingue par ses outils de transition de mise en page et sa capacité à exécuter des séquences et des boucles complexes sur le thread natif afin de maintenir des fréquences d'images élevées. Il fournit un système pour orchestrer des animations fluides d'entrée et de sortie lors de l'apparition ou de la disparition de composants dans l'interface utilisateur. Le projet couvre un large éventail de capacités de mouvement, incluant des transitions de style basées sur l'état avec des variantes nommées, le séquençage d'images clés (keyframes) et des animations interactives mappant les entrées utilisateur à des plages visuelles. Il inclut également des composants spécialisés pour les états de chargement animés, tels que les placeholders scintillants.

stroll.js est une bibliothèque d'animation UI frontend conçue pour transformer les listes web standard en affichages à défilement tridimensionnel. Elle fonctionne comme un outil pour créer des perspectives basées sur la profondeur en utilisant les transformations CSS3. La bibliothèque se spécialise dans les animations web 3D et le design de listes interactives. Elle implémente des effets visuels qui répondent au mouvement de l'utilisateur, ajoutant une profondeur spatiale et une perspective aux éléments de liste au fur et à mesure qu'ils sont parcourus.

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.

Click effect inspired by Google's Material Design http://fian.my.id/Waves/

An application demoing meaningful motion on Android