zsviczian / obsidian-excalidraw-plugin

A plugin to edit and view Excalidraw drawings in Obsidian
4k stars 215 forks source link

FR: Adding animation scripts to objects #1910

Open lllangWV opened 1 month ago

lllangWV commented 1 month ago

Is your feature request related to a problem? Please describe. I am using Excalidraw to create diagrams for videos and want to hide some material during presentations, then reveal it with animation. Achieving this through post-editing in Premiere Pro is tedious. I found a GitHub package that does this neatly. I am willing to write the code for this, I think it would be a fun project and other might find it useful. I'm seeking advice on the best approach to code this feature, or if it is even possible.

Describe the solution you'd like I'd like a way to achieve the same animation as shown on the GitHub page. I'm considering using the built-in script engine in obsidian-excalidraw to implement this, envisioning an interface like the one below. Though there are probably things I am not taking into account, when I would try to code this.

image

The intended functionality should look like this. This is taken from the repository mentioned above.

83698750-332ca080-a63d-11ea-9845-d2442e9b4305

Describe alternatives you've considered An alternative solution could be creating an external plugin that uses the Excalidraw-Obsidian file structure to perform animations in a different window. Somebody asked the developer dai-shi if their package could be used this could be used in obsidian excalidraw. He responded:

This is provided as a reusable package. https://www.npmjs.com/package/excalidraw-animate So, someone might be able to integrate it. excalidraw-claymate does that too. excalidraw-layers is very experimental and not maintained.

Any advice about how to achieve this would be appreciated!

Best, Logan Lang

lllangWV commented 1 month ago

Hey,

wanted to give an update for a solution here. Animation is definitely possible within the Excalidraw script engine. "I" created a script that will rotate a diamond in in the excalidraw canvas. (I created a custom openai api agent that has the context of the ExalidrawAnimate class, this improves the probability it will use the appropriate properties when prompted to create a script)

https://github.com/user-attachments/assets/05c5bd7a-ef0d-4fbd-bfa9-010598665af6

I think the next task is design the appropriate panel interface to control all the animation. I would still like feedback because I have next to no javascript knowledge.

Best,

Logan Lang