bringking/react-web-animation

How bringking/react-web-animation works

react-web-animation is a small React runtime library that declaratively wraps the Web Animations API. Users supply child elements, keyframes, and timing; they can animate one element directly or compose animatable children into parallel or serial effects, then control playback and receive callbacks. The map focuses on runtime components and their shared player-control layer. The README documents the Web Animations API polyfill dependency; sampled source shows the direct API calls. Demos and examples are omitted as usage material.

Main entry points: index.js Public exports · animation.js Single animation · effect.js Effect orchestration · animated.js Animated tags

Components 12

React API

Public exports src/index.js
Animated tags src/animated.js
Animatable child src/animatable.js

Animation Effects

Single animation src/animation.js
Parallel group src/animation_group.js
Serial sequence src/animation_sequence.js
Effect orchestration src/effect.js

Runtime Support

Player controls src/mixins/playable.js
Element wrappers src/utils/with_hoc_elements.js
DOM tag list src/utils/dom_elements.js

Other components

Library user
Web Animations API

Connections 17

Library user → Public exports: imports README.md
Public exports → Animated tags: exports src/index.js
Public exports → Animatable child: exports src/index.js
Public exports → Single animation: exports src/index.js
Public exports → Parallel group: exports src/index.js
Public exports → Serial sequence: exports src/index.js
Animated tags → Single animation: wraps src/animated.js
Animated tags → Element wrappers: creates tags src/animated.js
Animatable child → Element wrappers: creates tags src/animatable.js
Element wrappers → DOM tag list: iterates tags src/utils/with_hoc_elements.js
Single animation → Animatable child: extends src/animation.js
Single animation → Player controls: uses controls src/animation.js
Parallel group → Effect orchestration: extends src/animation_group.js
Serial sequence → Effect orchestration: extends src/animation_sequence.js
Effect orchestration → Player controls: uses controls src/effect.js
Single animation → Web Animations API: animates node src/animation.js
Effect orchestration → Web Animations API: plays timeline src/effect.js

More JavaScript diagrams: 1inch/limit-order-protocol · devopsinsiders/reacttodouimonolith · nesaku/biblioreads · evercoder/clipboard-inspector · alanrk/tabmark-bookmark-new-tab

Drawn by GitDiagram on September 30, 2026 from the repository's file tree, README and source files. Read as Markdown ·