https://github.com/dai-shi/excalidraw-animate

A tool to animate Excalidraw drawings
https://github.com/dai-shi/excalidraw-animate

Last synced: 6 days ago
JSON representation

A tool to animate Excalidraw drawings

• Host: GitHub
• URL: https://github.com/dai-shi/excalidraw-animate
• Owner: dai-shi
• License: mit
• Created: 2020-05-16T15:11:41.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-26T07:13:29.000Z (about 2 months ago)
• Last Synced: 2024-10-29T16:58:05.616Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://dai-shi.github.io/excalidraw-animate/
• Size: 13.2 MB
• Stars: 1,305
• Watchers: 11
• Forks: 71
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - dai-shi/excalidraw-animate - A tool to animate Excalidraw drawings (TypeScript)

README

        
# excalidraw-animate



## What is this

This is an external tool to convert an

[Excalidraw](https://excalidraw.com) drawing

into animation.

## How to use it

Visit: 

### 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:

## Tweets

- [The first one with arrows](https://twitter.com/dai_shi/status/1261683775924105218)

- [Public URL for trial](https://twitter.com/dai_shi/status/1263103554631249923)

- [Real example with lines](https://twitter.com/dai_shi/status/1263230421715714049)

- [Free draw example](https://twitter.com/dai_shi/status/1263237733067091968)

- [Text example](https://twitter.com/dai_shi/status/1263451555858010115)

- [All shapes example](https://twitter.com/dai_shi/status/1263873223726231552)

- [Real example with better timing](https://twitter.com/dai_shi/status/1264056453880377345)

- [Pause and resume](https://twitter.com/dai_shi/status/1264105261800669184)

- [Export svg and webm](https://twitter.com/dai_shi/status/1264194079165779970)

- [Adding text field](https://twitter.com/dai_shi/status/1264695085871947776)

- [Grouping support](https://twitter.com/dai_shi/status/1265441085641256960)

- [Embedding example](https://twitter.com/dai_shi/status/1269787031892160512)

- [Load local file](https://twitter.com/dai_shi/status/1271802345106489345)

- [Keyboard shortcut](https://twitter.com/dai_shi/status/1280118714470330368)

- [Support for libraries](https://twitter.com/dai_shi/status/1334851951339528202)

- [Support round rectangles](https://twitter.com/dai_shi/status/1338830468817461249)

- [Support background color](https://twitter.com/dai_shi/status/1343324961650343937)

- [Improved WebM export](https://twitter.com/dai_shi/status/1344935241668988930)

- [Grid layout for libraries](https://twitter.com/dai_shi/status/1352229139500044296)

- [Support arrowheads](https://twitter.com/dai_shi/status/1364184618371411971)

- [Step through animations](https://twitter.com/dai_shi/status/1376930624804560900)

- [Support freedraw](https://twitter.com/dai_shi/status/1391770531582537734)

- [NPM package](https://twitter.com/dai_shi/status/1398600356322451456)

- [Support images](https://twitter.com/dai_shi/status/1453012946129338368)

- [Support filled arrow cap](https://twitter.com/dai_shi/status/1453732212478644231)

- [Excalidraw v0.11.0](https://twitter.com/dai_shi/status/1494672036459081730)

- [Excalidraw v0.12.0](https://twitter.com/dai_shi/status/1561928834198704128)

- [Excalidraw v0.15.2](https://twitter.com/dai_shi/status/1654112716037185536)

## Other projects with Excalidraw

- [Excalidraw Gallery](https://github.com/dai-shi/excalidraw-gallery)

- [Excalidraw Claymate](https://github.com/dai-shi/excalidraw-claymate)

- [Excalidraw Layers](https://github.com/dai-shi/excalidraw-layers)