$ cat projects/excalidraw state machine/README.md
Excalidraw State Machine
A keyframe-style animation engine for Excalidraw inside Obsidian — smoothly interpolating position, size, rotation, and color between link-triggered states.
- status
- Live
- duration
- Early stage
- role
- Creator & Developer
- stack
- Obsidian · Excalidraw · ExcalidrawAutomate · JavaScript
$ head summary.md
Quick summary
problem
Problem Solved
Excalidraw drawings in Obsidian are static — there was no way to create smooth, keyframe-style animations where elements interpolate position, size, rotation, and color. Building explainer or presentation sequences inside Excalidraw required manual, jarring jumps between frames.
solution
Our Solution
This project provides two ExcalidrawAutomate scripts that work together. Helper_DuplicateState.js duplicates a frame and stamps persistent tweenId customData on every child element. PlayHook_StateMachine.js reads these IDs and, on playback, interpolates matched elements' position, size, rotation, and color via a link click — using immutable rendering for smooth, pixel-perfect repaints.
impact
Results Achieved
Users can now build slide-style sequences where elements smoothly tween between states, with multi-group support, custom easing and timing, and clean duplication of complex elements (Mermaid diagrams, grouped shapes, library items).
$ cat features.txt
Key features
- ▸Smooth property interpolation: x, y, width, height, angle, strokeWidth, fontSize, strokeColor, backgroundColor
- ▸Multi-group support: multiple independent slide sequences on the same canvas
- ▸Clean duplication: remaps containerId, startBinding, endBinding, and groupIds to prevent snapping
- ▸Custom easing and timing via customData on the source frame
- ▸Fade in/out for unmatched elements instead of popping
- ▸Immutable rendering for pixel-perfect, stutter-free repaints
- ▸Opacity stacking workflow for easy editing of complex animations
Interested in working together?
I'm always open to discussing new opportunities and interesting projects. Let's create something amazing together.