excalidraw-animate

What is this

This is an external tool to convert an Excalidraw drawing into animation.

How to use it

Visit: https://dai-shi.github.io/excalidraw-animate

There are three ways to load content:

Load File

Load a single Excalidraw drawing (.excalidraw or .json file).

1. Save your drawing as a file in Excalidraw
2. Click Load File and select the file

Load Library

Load an Excalidraw library file (.excalidrawlib) containing multiple items. Each library item will be animated separately.

1. Export a library from Excalidraw
2. Click Load Library and select the .excalidrawlib file

Enter link + Animate!

Paste a URL into the text field and click Animate!

Supported formats:

• Excalidraw shareable link: https://excalidraw.com/#json=xxxxx,yyyyy
• Direct link to a library file: https://example.com/file.excalidrawlib

Tips

Elements without Animation Order

Elements without an explicit animation order are treated as Order=0 and animate in their creation order.

Grouped elements

When you group elements with different Order/Duration values, the input field shows empty with a "Mixed" placeholder. If you leave it empty, the original values are preserved. If you enter a new value, it applies to all selected elements.

• Individual elements: 500ms default duration each
• Grouped elements: 5 seconds total, divided among group members
• You can override this by setting a custom Duration

Edit mode and Animate mode maintain separate data

To keep the ability to edit later, export from Edit mode with "Embed scene" enabled, then load the file in Edit mode.

Note: Files loaded in Animate mode are only available in Animate. Switching to Edit mode shows your previous Edit data, not the imported file. Also, SVG files exported from Animate mode can be loaded back into Animate, but cannot be edited in Edit mode (the exported SVG does not contain the original scene data).

Known issues

• Exporting WebM feature is not perfect. Please use screen capture if that doesn't work as expected.

Package

It's also provided as a package: https://www.npmjs.com/package/excalidraw-animate

Tweets

• The first one with arrows
• Public URL for trial
• Real example with lines
• Free draw example
• Text example
• All shapes example
• Real example with better timing
• Pause and resume
• Export svg and webm
• Adding text field
• Grouping support
• Embedding example
• Load local file
• Keyboard shortcut
• Support for libraries
• Support round rectangles
• Support background color
• Improved WebM export
• Grid layout for libraries
• Support arrowheads
• Step through animations
• Support freedraw
• NPM package
• Support images
• Support filled arrow cap
• Excalidraw v0.11.0
• Excalidraw v0.12.0
• Excalidraw v0.15.2

Other projects with Excalidraw

• Excalidraw Gallery
• Excalidraw Claymate
• Excalidraw Layers