// the find
dai-shi/excalidraw-animate
A tool to animate Excalidraw drawings
A small TypeScript web app, also published as an npm package, that turns an Excalidraw drawing from a file, a shareable link, or a library into an animated SVG or WebM. It suits people who already draw in Excalidraw and want a quick explainer clip or an embeddable animation without learning a motion tool.
It reads Excalidraw's own JSON directly, so shareable links, .excalidraw files, and .excalidrawlib libraries all go through one loader and there is no separate asset pipeline. Animation order and duration are stored per element, and the grouping rule (a group gets five seconds split across its members unless overridden) is a sensible default that makes most drawings look right without tweaking. The SVG export is the useful output because it is a plain file you can drop into a doc or README, and it can be loaded back into Animate. The repo runs Playwright end-to-end tests in CI, which is more than most projects this size bother with.
The README admits the WebM export is not perfect, so anyone who needs a reliable video file should expect to fall back to screen capture. The default order is creation order, so a diagram drawn out of sequence needs its Order values set by hand, one element or group at a time. Edit and Animate keep separate data, and the README spends a whole section explaining the consequences, which is a sign the mental model is confusing: a file loaded in Animate cannot be opened for editing in Edit. src/vendor/loadScene.ts is a copied loader with its own license file, so it will drift from upstream Excalidraw formats unless someone keeps it in sync.