Join my Discord server ๐ React Fan
For more links, visit ๐ My contact site
A tool to animate Excalidraw drawings
Home Page: https://dai-shi.github.io/excalidraw-animate/
License: MIT License
Join my Discord server ๐ React Fan
For more links, visit ๐ My contact site
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!!
I absolutely love the tool but faced this bug today, so thought I will report it.
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! ๐คฆ
Reproduce:
Centered text appears as a single object, instead of one character at a time.
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
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
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?
This and the claymore / layers scripts are very useful.
Any chance to see them on the Excalidraw that works inside Obsidian.md ?
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.
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
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
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:
Would be good to hear if you have any ideas around this already. Thanks
Now, this is very hard because we can't simply animate with SVG.
I will try to see if interpolation using perfect-freehand works.
How to make same animation for
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.
this would be helpful. currently, the speed is a little bit fast.
image works with local file but not from the link.
example: https://excalidraw.com/#json=6743466985914368,aSSXs1aFfI7VbLEPvnhjfw
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!
the drawing color is always in black in free draw. is this a known issue?
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
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.