Timelines put many elements on one clock: the heading fades as the card slides, and both scrub together. A CSS-style transition (set per property in the DESIGN tab) is the right tool for a hover; a timeline is the tool for a sequence.
The timeline dock lives behind the ANIMATE tab, and it is off by default — if you have never seen a timeline in Misaki Studio, this tab is why. Open it and the dock appears under the canvas.
The primary gesture is not a keyframe dialog — it is editing on canvas while the panel is open. Create a timeline, place the playhead, then move or resize an element: a keyframe records at the playhead with the element's new values. Scrub, move again, and the motion exists.
The same gesture covers shapes: edit a path's anchors, drag a mesh point or change a shader parameter with the panel open, and the whole shape is captured as a keyframe at the playhead — one undo step.
Around that gesture, the dock gives you:
Tracks per element, expandable to per-property rows; selecting an element on canvas reveals its track for you.
A draggable playhead with a time chip, ruler scrubbing, and play/pause with a live seconds readout — animating the real canvas elements.
Copy and paste for whole tracks or single keyframes, through the system clipboard, so they travel across files and windows.
Ctrl/Cmd + wheel to zoom the time ruler around your cursor.
A keyframe's time is typed in the POINT panel rather than dragged, and keyframes are selected one at a time — there is no marquee over the grid.
Twenty-four properties: position (left, top, right, bottom), size (width, height), translate X/Y, scale (uniform and per-axis), rotate, opacity, padding and margin (combined or per side), and gap. Each animated property is marked Fixed (px) or Relative (%) per element.
Color is deliberately not on that list — fills, borders and shadows do not take keyframes. Color change belongs to interaction-state transitions in the DESIGN tab, or to a mesh/shader keyframe, which animates color as part of the shape.
Text can stagger. Right-click a text element and choose Add Selection to Current Timeline as Words (or as Characters): each word or character becomes its own animated target. Two dials shape the wave — Spread (how much of the segment each item uses) and From (where the wave starts, so center-out and edge-in are both one slider away).
Easing is set per property, per keyframe — not per timeline. Pick from seven named curves (Linear, the Sine family, Quad, Bounce) or open the curve editor and drag the two handles of a custom cubic-bezier; the vertical axis is unclamped, so overshoot and anticipation curves are drawable. The same controls exist on path, mesh and shader tracks.
A timeline's playback mode is set in its config:
Mount — plays once when the component renders.
Appear — plays once when the element scrolls into view.
Scroll Sync — the scroll position scrubs the timeline; scroll back and it rewinds.
States — logic drives it: play, replay, pause, reverse, ignore, destroy.
None — excluded from the export entirely.
Scroll modes can run on either axis, and both the scroll container and the target are pickable elements (or the document body), each with tunable enter/leave thresholds and a smoothness setting — instant tracking or a lerped follow.
A States timeline joins the logic system in both directions: the Timeline Player issues commands (conditionally, if you want), and the timeline's begin and complete are readable in any condition. Only States timelines have this two-way wiring — an autoplay or scroll timeline cannot be paused from a button.
Loop and Alternate (play forward, then back) are in the same config.
Three honesty notes on playback. The dock's own Play button ignores Loop and direction — judge those in a preview, not on the canvas. Scroll timelines also behave slightly differently between canvas and export, so verify scroll-driven work in a preview too. And the Reverse direction option currently does nothing in exported code — use Alternate, or author the motion reversed.
Whole-shape keyframes make the showpiece animations:
A path morphs into another shape. Capture the path at two keyframes and the d tweens — even between shapes with different anchor counts; the exporter subdivides the simpler shape automatically.
A mesh gradient's whole grid is one keyframe — every point's position, color and handles interpolate. This survives export as data the runtime plays into live WebGL. Keep the grid's dimensions and color count the same across keyframes; points added later do not join the animation.
Shader parameters keyframe in the editor and preview — but those keyframes do not reach exported code yet. An exported shader falls back to its base parameters, still animating under its own speed. Design shader motion with that limit in mind.
A keyframe asserts what the design is at that moment. If an element's base style already sets an opacity or a transform, the keyframe must carry that value too — otherwise the animation overwrites it and the element never returns to its resting appearance. When something ends up stuck transparent or flattened after its animation, this is almost always why: give the final keyframe the element's resting values.
Shortening a timeline deletes keyframes past the new end — permanently. Lengthening it again does not bring them back.
A scroll config whose range can never advance paints the first keyframe and stops, silently. The editor flags the broken config on the timeline row — trust the flag.
Timeline names take letters and digits only.
With an agent: the full authoring surface is scriptable — create and configure timelines, set and ease keyframes, capture mesh/path/shader keyframes — and an agent can render a finished timeline to a frame-accurate MP4 (desktop app only). See MCP tools.