The editor

The timeline

One row per animated property, one diamond per keyframe, and a curve on each segment between them. This page covers everything you can do there, from snapping and zoom to markers, loops, copy and paste, the value graph and onion skin.

One row per property: An element with x, opacity and blur has three rows. Adding a property adds a row, and removing its last keyframe removes the row, so the timeline only shows what’s actually animating.
Each segment has its own curve: Each keyframe carries the curve for the segment that leaves it, so one track can ease out of its first keyframe and spring out of its second.
You can see every curve: The gap between two diamonds is drawn as the curve that fills it, straight from what the stage plays: a spring shows its overshoot, and a fade that falls is drawn falling. Click a curve to open it in the curve panel. A segment between two equal values is dashed. It’s there but moves nothing, which is the usual reason an animation seems not to work.
Springs have no duration: A spring runs until it settles, so its segment is as long as the spring needs. If the next keyframe comes first, the engine cuts the spring there, and the timeline marks the cut so you can see the shape you’re not getting.
Snapping: Dragging a diamond snaps to other keyframes on the same row and to aligned times on other rows, which keeps a stagger even when you retime it.
Zooming the timeline: Zoom changes how many milliseconds a pixel is worth. The playhead, the ruler and every diamond follow it. The button beside the zoom slider (or ⌘K, “Fit timeline to duration”) fits the whole animation into the width you have. Because the scale is fixed, a narrower timeline shows less time; it never moves a diamond.
The view follows the playhead: During playback the view pages forward a screen at a time as the playhead reaches its edge, so diamonds hold still while you read them. Scroll away while it plays and it lets you, until playback starts again.
Double-click to add: Anywhere on an empty part of a row. The ghost diamond that follows your pointer shows where it will land.
Markers: Press M (or ⌘K “Add marker at playhead”) and a name field opens on the ruler at the playhead. Type a name, like “card lands” or “list in”, and press Enter, or just press Enter for a numbered one. Nothing is added until then, so adding and naming is one undo, and Escape adds nothing. Click a marker to move the playhead there. Drag it and it snaps like a diamond. Double-click to rename it, and the × deletes it. A faint line runs down the tracks from each marker, and a dragged diamond snaps to it, which is what markers are for. They belong to the document, so they’re saved with it and outlive the element they were placed for.Where they stop: one marker per time, up to 50, with names up to 40 characters. They’re editor-only, and no export writes them yet (GSAP’s timeline labels would be the natural place for them).
Loop region: The button beside play cycles through off, loop and ping-pong. With a loop on, a band along the foot of the ruler marks the stretch playback repeats, which starts as the whole animation. Playback runs it until you pause: back to the start at the end, or in ping-pong, back the way it came, so you can watch an ease-out land and leave without a cut. Drag either edge of the band to set where it starts or ends, or drag the band to move it; both snap like a diamond. Double-click the band, or use ⌘K “Loop the whole animation”, to loop all of it again. ⌘K “Loop selected keyframes” sets it from the earliest selected keyframe to the latest. Pressing play with the playhead outside the band starts at the band.Where it stops: it’s a way of watching, not part of the animation. No export repeats anything, it isn’t undoable, and it isn’t saved with the document, only remembered for it in this browser.
Copy and paste keyframes: ⌘C copies the selected keyframes, measured from the first. With an element selected and none of its keyframes, it copies all of them. ⌘V pastes onto every selected element at the playhead, in one undo. Pasted onto one element, what arrived is selected, so ← → slides it into place. For each property it brings, a paste replaces what the element had over that span and keeps the rest. ⌘⇧V pastes the timing only: the copy’s times and curves, keyframe for keyframe, keeping the element’s own values, property to property, or from a copy of one property onto every property. The copy sits on the clipboard as readable JSON, so it pastes into another tab, and it’s checked like a saved document on the way back in.Where it stops: near the end, a paste slides back until it fits, and it only lengthens the animation for a copy longer than the whole animation. Keyframes from two elements can’t be copied together. Timing needs the same number of keyframes on both sides. x and y won’t paste onto an element on a motion path. And ⌘⇧V and the palette’s paste commands use the last keyframes copied or pasted in this tab, since only ⌘V can read the clipboard.
The value graph: Switch Tracks to Graph in the transport bar (or ⌘K “Show value graph”) and the track area draws the selected element’s values against time, under the same ruler, zoom and playhead. Rows show when; the graph shows how: where a value speeds up, where a spring overshoots. One property is in focus, with its scale at the top and bottom edges. Pick it on the left, or select one of its keyframes. The rest sit behind it, faint, each scaled to its own range. Drag a dot to move a keyframe in time and value at once (⇧ locks one axis). Selected dots move together, and time snaps the same way a diamond does. A selected keyframe’s bezier shows its two handles, and pulling one works like the curve panel’s pad at the size of the animation: a preset becomes a custom curve.Where it stops: springs have no handles (shape them in the curve panel). A handle with no length, like easeOut’s first, sits under its keyframe, so pull it out in the pad. Colors aren’t graphed. The graph moves only the dots it draws, so retiming across properties stays on the rows. It’s pointer only; the diamonds and the inspector are the keyboard path to the same edits. It’s a view setting, remembered but never saved into the document.
Onion skin: The layers button beside the stage’s zoom (or ⌘K “Show onion skin”) draws outlines of the selected elements 3 steps before the playhead and 3 after, 80ms apart, past in gray and future in the accent color. You see spacing and arcs while scrubbing, without playing. They hide during playback, where they’d only smear. Top-level elements only. It’s a view setting, remembered across documents and never saved into one.