dai-shi / excalidraw-animate

A tool to animate Excalidraw drawings

Join my Discord server 👉 React Fan

For more links, visit 👉 My contact site

excalidraw-animate's Issues

[new feature] keep animating the arrow with lines

For example, after finishing the animation: keep the dotted arrow/line animated
https://excalidraw.com/#json=ChYHiaWabxSyCl6oX83ak,nFmcx4UF1Cqycy3zZcbOgg
like in this video:
https://www.youtube.com/watch?v=rZpR9DyM_qs
if you can guide me on where to start, it would be great!
Thank you!!

Pause/Resume could be the same button (toggle)

[Bug] Generated animation is slightly off on y-axis compared to original image

I absolutely love the tool but faced this bug today, so thought I will report it.

Here's my excalidraw image:

When I try to import it in excalidraw-animate it is animated, but slightly off-axis! This is a bit confusing, I have tried importing both via link and the .excalidraw file.
Here's what it looks like:

If you observe, the red arrows are offset on y-axis by a few pixels, unlike the original drawing!

Attaching my .excalidraw image for reproduction of the bug here:
day_16.excalidraw.zip

p.s: Attaching as a .zip as Github doesn't support .excalidraw format! 🤦

Text is drawn by character only when left-aligned

Reproduce:

1. Create text
2. Set alignment to center
3. Create animation

Centered text appears as a single object, instead of one character at a time.

TypeError: Cannot read property 'split' of undefined in renderElementToSvg (element.font seems to be missing)

Can't share the JSON that caused it, but I guess some edge case is not handled.

Uncaught (in promise) TypeError: Cannot read property 'split' of undefined
    at renderElementToSvg (main.js:980)
    at main.js:871
    at Array.forEach (<anonymous>)
    at renderSceneToSvg (main.js:869)
    at exportToSvg (main.js:577)
    at main (main.js:294)

excalidraw-animate/public/main.js

Line 980 in 3f32dbc

const fontSplit = element.font.split(" ").filter((d) => !!d.trim());

Gif support

Firstly, man this is an awesome tool like seriously hats off to you and everyone who's working on this. I love svg but want gif support such that it plays in loop. To be honest I don't know about file formats and graphics but any links I could even pull PR up

How to retain the background color

It seems that regardless of any background color set for the entire board, it stays white. Is there a way to change the background in the animation?

Any chance to see this on Obsidian Excalidraw?

This and the claymore / layers scripts are very useful.

Any chance to see them on the Excalidraw that works inside Obsidian.md ?

• rsd

[feature] open local json file

Allow looping?

Is there any possibility to set if the SVG animation should loop?

I made a diagram animation with excalidraw-animate for one of my blog posts. Since it only plays once, the animation is already done when readers scroll the page down to where the diagram is. It would be nice if it's possible to allow it to loop itself.

Thanks.

vertical black line on the webm file

sending u an example. happening with all the webm vids i created.

cc: @dai-shi

https://dai-shi.github.io/excalidraw-animate/#json=6323944546107392,pK6mu2f4Dp11pBLCRR6mIA

[Features] - Embed in .excalidraw.webp

Hi,

I did just discover the features to save an excalidraw as .excalidraw.svg and .excalidraw.png (I'm doing that with the VSCode extension), and so have both the excalidraw source to edit the file and a render to embed it anywhere (notebook, markdown, html).

I suppose the excalidraw payload is kind of hide in the file.

I would be nice to have a .excalidraw.webp file with both the excalidraw payload and the webp rendering from excalidraw-animate, in order to embed the animation in reveal.js, html ... without losing the source

Request for more animation options

Hi, great tool - thanks for developing. There are a couple of missing animation options which I feel would elevate this tool and make it much more versatile:

• allowing the user to select the animation speed
• setting animation order for layers so that the user can choose which parts of their diagram are animated first and also an option to animate multiple layers concurrently

Would be good to hear if you have any ideas around this already. Thanks

Support freedraw

excalidraw/excalidraw#3512

Now, this is very hard because we can't simply animate with SVG.
I will try to see if interpolation using perfect-freehand works.

Export to GIF

@dai-shi

How to apply same animation for different whiteboard

How to make same animation for

https://github.com/ZuzooVn/SiploWhiteboard

Change order of animations?

Very cool tool, nice work!

I would find this much more powerful if it was possible to change the order of animations. Currently it is based on the order of created objects in excalidraw - but if manual re-ordering of objects was possible it would be easy to create "visual tutorials" using excalidraw and I would love this.

config the animation spped

this would be helpful. currently, the speed is a little bit fast.

support image with sharable link

image works with local file but not from the link.
example: https://excalidraw.com/#json=6743466985914368,aSSXs1aFfI7VbLEPvnhjfw

Play it backwards

I'm searching a way to play the animation backwards just like a video, I tried multiple ways but no success! Is there anyway of doing it?
Thanks!

free draw color

the drawing color is always in black in free draw. is this a known issue?

Export to WebM error

Amazing project! Got this trying to export to WebM

TypeError: Failed to execute 'showSaveFilePicker' on 'Window': Invalid type: video/webm;codecs=vp8
at file-save.mjs:2

"Step through" animations

I'd love to use this in order to teach concepts and do a voice-over recording while the animation plays - similar to drawing on a whiteboard while recording.

One challenge with that today, is that I need to hit the play/pause key at the exact right time (otherwise it pauses when the animation is half way finished).

I really wish there was a way to step through the animations, like using the left and right keys to play the next part of the animation or go back to the previous step in the animation.

groupNodes and elemens mismatch length

I am attempting to animate an excalidraw diagram however getting the following error in the console logs

animate.ts:661 Uncaught (in promise) Error: element length mismatch
    at animateSvg (animate.ts:661:1)
    at useLoadSvg.ts:74:1
    at async Promise.all (:3000/index 0)
    at async useLoadSvg.ts:65:1
    at async useLoadSvg.ts:98:1

Upon further investigating, I realized that animate.ts throws an error for this.

Here is a link to my exaclidraw diagram https://excalidraw.com/#json=-9jiwl8sky-JV5f6tys9A,u1j_Dzj5lOyKBj25-MEpMA

Background color

Is there a way to change the background color of the animation - to transparent or black/dark? I tried changing the background color in the SVG code and then re-exporting it, but the animation became jerky.