Add SVG animation editor with timeline, tweening and SMIL export - #292
Open
simonw wants to merge 3 commits into
Open
Add SVG animation editor with timeline, tweening and SMIL export#292simonw wants to merge 3 commits into
simonw wants to merge 3 commits into
Conversation
A keyframe animation studio in a single HTML file: draw rects, ellipses, lines, polygons, text and bezier pen paths, then animate them with a multi-track timeline. Auto-key records tweens when shapes are edited away from existing keyframes, including path morphing of pen geometry. Features per-keyframe cubic-bezier easing, onion skinning, a layers panel, undo/redo, localStorage autosave, SVG import, JSON project save/load and export to a self-contained SMIL-animated SVG with spline easing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BRc6VWxYVrEgEzzrJ2mai3
Contributor
Claude encountered an error —— View job I'll analyze this and get back to you. |
- Use 100dvh so the timeline is not hidden under Safari's browser chrome (body is overflow:hidden, so it was unreachable before) - Stack the layout vertically on small screens: swipeable single-row toolbar and transport, side-by-side properties/layers panel, and a shorter timeline that always stays on screen - Add a "fit" zoom mode (default on small screens) that scales the canvas to the available space; the stage wrapper now uses flex + margin:auto so oversized canvases scroll correctly in both axes - Fix touch interaction: timeline tracks allow touch scrolling (pan-x pan-y) while the ruler and keyframe diamonds remain draggable (touch-action:none), with pointercancel cleanup - Larger touch targets on coarse pointers: keyframe diamonds, selection/rotate handles and path nodes - Add a floating done/cancel bar while drawing pen paths and polygons (no Enter/Escape keys on mobile) - Inset timeline tracks by 8px so t=0 keyframes are not stuck under the sticky label column - maximum-scale=1 viewport stops iOS auto-zoom when focusing inputs Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BRc6VWxYVrEgEzzrJ2mai3
Deploying tools with |
| Latest commit: | 3ad65f6 |
| Status: | ✅ Deploy successful! |
| Preview URL: | https://47a3c28d.tools-b1q.pages.dev |
| Branch Preview URL: | https://claude-svg-animation-editor.tools-b1q.pages.dev |
Contributor
Claude encountered an error —— View job I'll analyze this and get back to you. |
On phones the side panel now stays hidden by default so the canvas gets the space; a floating "panel" button in the corner of the stage toggles it. Fit zoom recalculates when the panel opens or closes. Desktop layout is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BRc6VWxYVrEgEzzrJ2mai3
Contributor
Claude encountered an error —— View job I'll analyze this and get back to you. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A keyframe animation studio in a single HTML file: draw rects,
ellipses, lines, polygons, text and bezier pen paths, then animate
them with a multi-track timeline. Auto-key records tweens when shapes
are edited away from existing keyframes, including path morphing of
pen geometry. Features per-keyframe cubic-bezier easing, onion
skinning, a layers panel, undo/redo, localStorage autosave, SVG
import, JSON project save/load and export to a self-contained
SMIL-animated SVG with spline easing.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01BRc6VWxYVrEgEzzrJ2mai3