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

Using a local file

1. Save as a file in Excalidraw

2. Load the file in Excalidraw Animate

Using a shareable link

1. Create a shareable link in Excalidraw

2. Enter the link in the field and click "Animate!"

This also works for Excalidraw Library links.

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