Your first animation, end to end

1. 01Open a template

   A template is a real, working animation. Taking one apart is the fastest way to learn how a timeline works.

2. 02Press space

   Watch it once at full speed. Then drag the playhead across the ruler and watch it again at your own pace. The second pass is where you see what's happening.

3. 03Click an element on the stage

   The inspector fills with its properties and the timeline shows its tracks: one row per animated property, one diamond per keyframe.

4. 04Drag a value label

   Drag the label itself, not the slider. The whole drag is one undo, and the change lands as a keyframe at the playhead.

5. 05Drag a diamond

   Retiming teaches you the most. Move one keyframe later and watch what the segment before it does. Each segment carries its own curve, so timing and easing feel like one decision.

6. 06Click a curve and change it

   Every segment on the timeline draws its curve. Click one and it opens in the curve panel, bottom right. Pick a spring, pull it, and watch the code beside the pad rewrite itself. The export is generated from the same spring the preview plays, so what you feel here is what ships, within a small measured tolerance.

7. 07Press ⌘E

   Motion, CSS or GSAP, for this element or the whole scene. The text in the dialog is exactly what you'll paste.

The tour, inside the editor. The compass button beside ⌘K, or Take the tour in ⌘K, walks through 5 steps as short loops, and Try it puts a ring on the control a step is about. A first visit offers the tour once, in the corner of the stage. If you open a template, a saved animation or a blank stage, it stays out of the way.

What the editor opens on. The first time, the demo card, whose rows are the three steps. It plays once by itself until you’ve started or dismissed the tour (with reduced motion, the playhead waits at the end instead). Once you’ve pasted a component, opened a template or saved something, it opens on a blank stage instead, and New animation in your library always does. The demo is one click away: Add the demo card, on the empty stage or in ⌘K. This is remembered per browser, so a private window shows the demo again.

On a phone or a tablet. The editor needs a window at least 1024px wide and a mouse or trackpad, since a precision timeline and handles dragged by the pixel don’t work under a fingertip. Below that, or on a touch-only tablet, it offers the templates, these docs and a link to copy for later. Continue anyway opens the editor regardless for the rest of the visit, and an iPad with a trackpad or a mouse gets the editor from the start.