Animate Your
Whiteboards
Enables animated GIF files, customizable path motion flows, and the complete Iconify open-source icon library directly inside your Excalidraw whiteboard canvas.
* 100% Free, Secure & Open Source. Integrates directly with React imageCache.
⚡ Core Features
🎨 Complete Iconify Library
Browse 200+ collections (Lucide, Tabler, Material, Phosphor, Font Awesome) directly via a glassmorphic sidebar panel. Star favorite icons, filter by collections or category (including native Animated SVGs), search instantly across 300,000+ icons, and drag-and-drop or click to paste SVGs. Open/close with the B shortcut.
🌊 Line & Arrow Flows
Animate flows along paths and arrows on-demand. Choose from 10 motion styles: Particles, Marching Ants, Gradient Pulse, Ripple Wave, Packet Train, Snake Trail, Comet, Electricity, Wave, and Dual Flow. Fine-tune speed, direction, element size (1-5), spacing (20px-120px), and glow levels (None to Strong).
👾 Real-time Playback
Watch GIFs loop directly on your board and run native SVG animations (SMIL/CSS). Independent playback switches in the extension popup dashboard let you turn GIF and SVG rendering on/off separately, with customizable speed multipliers (0.5x, 1x, 1.5x, 2x) for GIFs.
🕹️ Interactive Demonstration Board
Interact with the simulated Excalidraw whiteboard. Turn the simulated extension **ON** and **OFF** in the popup dashboard to see the live rendering system freeze or loop.
Whiteboard is Empty
Spawn vector elements, drag and drop a GIF onto the board, or click preset stickers below!
GIF Animations
Loop playback for canvas GIFs
SVG Playback
Native loops for animated SVGs
Flow Animations
Flow motion effects along paths
👾 Click to Spawn Pixel Stickers:
📐 Spawn Vector Elements:
Need more animated stickers?
Check out our sister project, AstroFocus GIFs — a massive library of high-quality retro pixel-art animations, game sprites, and transparent loops!
🔧 Loading Extension Unpacked
Since the project is hosted publicly on GitHub, follow these quick retro steps to run it locally in Chrome:
Get Files
Download the source code archive from the GitHub repository and extract the files to a folder on your computer.
Developer Mode
Open Chrome, navigate to chrome://extensions, and toggle Developer Mode ON in the top-right.
Load Folder
Click Load Unpacked and choose the extracted root folder. Open Excalidraw and start adding animated GIFs!
🧬 Hooking React Fiber
Unlike standard canvas extensions that paste overlays, Excali Up works natively with **Excalidraw's core rendering pipeline**:
- DOM Traversal: Resolves react nodes by searching `.excalidraw__canvas.interactive` for key attributes.
- Image Cache Overriding: Hijacks `app.imageCache.set` so that incoming GIF assets swap static image references.
- Omggif Decoder: Computes disposal formats (e.g., restore to background or previous frames) to draw precise frame frames.
- Immutable Versioning: Forces canvas redraws by incrementing version hashes directly in Excalidraw scene arrays.
// Intercept Excalidraw cache
const originalSet = imageCache.set;
imageCache.set = function(fileId, cacheEntry) {
const res = originalSet.apply(this, arguments);
if (cacheEntry.mimeType === 'image/gif') {
if (!activeGifs.has(fileId)) {
// Decode & animate via canvas
activeGifs.set(fileId, new GifPlayer(
fileId, cacheEntry, app
));
}
}
return res;
};