The timeline

The timeline shows time from left to right: the ruler and the red playhead on top, then a row for each animated layer with a row for each of its tracks and their keyframes. A new project is 3 seconds long and loops forever.

WHAT YOU’LL MAKE

The bird sets off at half a second and crosses the sky as the cloud drifts by, then the 3-second animation starts over. This one is the real exported SVG, playing.

Step by step

1. Scrub through it

   Drag the red playhead along the time ruler. The canvas shows every moment as you go, and the time in the timeline's header follows.

2. Zoom the timeline

   Drag the zoom slider at the right of the timeline's header to the right, or hold Ctrl and scroll over the timeline. The seconds spread out, so keyframes are easier to pick; scroll sideways for the rest.

3. Box-select keyframes

   On the bird's Position row, drag a box from the empty space after its last keyframe, left past its first one. Both keyframes are selected. A click selects one keyframe, and Shift+click adds one or takes it out.

4. Drag them later

   Drag one of the selected keyframes half a second to the right: they all move together, and the bird now sets off at 0.5s. A tip shows the time as you drag; keyframes snap to the playhead, to other keyframes and to 0.05s steps.

5. Turn off Loop preview

   Click the loop button, right of play. With it off, the preview plays once and stops at the end. It changes only the preview: the animation still loops forever when exported.

6. Play it

   Press Space. The animation plays once, to the end of its 3 seconds, and stops. Home takes you back to the start.

Keys