Keyframe
Open studio
ContentsQuick start

Getting started

Quick start

Make your first animation in a few minutes. You don’t need to know After Effects: this page starts from nothing.

What Keyframe is

Keyframe is an animation studio that runs in your web browser. What you make is editable animation: a stack of layers whose position, size, colour and more change over time, and stay changeable. When you want a video or a picture, you export⁠ (opens in a new tab) one.

The editor draws everything on your graphics card with WebGPU, so it needs a current version of Chrome or Edge on a computer.

Your projects are saved in this browser, on this device. You don’t need an account to use the editor. To keep a copy, or to carry on on another computer, export the project as a file⁠ (opens in a new tab).

Open the studio

Select Open studio at the top of any page on this site. The studio opens straight into your project.

There is nothing to save by hand: every change is kept in this browser as you work, and is still there after you close the tab.

Your project

The studio keeps one project in this browser. A new project starts with one empty composition called Main. A composition is a scene: a canvas of a fixed size and a stretch of time, holding the layers that make up the picture.

While a composition is empty, the viewer shows Start your animation. You can describe what you want and select Continue with Agent to have the Agent⁠ (opens in a new tab) make it, or build it yourself, as this page does. New composition in the Project panel adds another composition.

To open a project file⁠ (opens in a new tab) someone sent you, or one of your backups, choose Project file (the … button at the top right) and then Import project. It replaces the project that is open, so choose Export project first if you want to keep that one.

The editor at a glance

The editor is laid out like After Effects. The numbers on the picture match the list under it.

The Keyframe editor, with one rectangle layer animated across the composition.
  1. ToolsThe tools you use in the viewer: selection, hand, zoom, shapes, text, the pen, brushes, bones and more. Rest the pointer on one to see its name and key.
  2. ProjectEvery composition and imported file in the project. New layer, New composition and file import are at its foot.
  3. Composition viewerThe picture at the current time. Select a layer here and drag it to move it.
  4. TimelineLayers stacked from front to back, with time running left to right. Keyframes show here as diamonds; the rose line is the playhead, the current time.
  5. PropertiesThe settings of what is selected: a layer’s Position, Scale, Rotation and Opacity, each with a stopwatch that animates it.
  6. AgentOpens a panel where you say in words what you want. The Agent plans the steps and makes the changes with the editor’s own tools; each change arrives as a draft you apply or discard, and stays editable after that.
  7. ExportSaves the animation as a video, an animated image or a sequence of pictures.

Make your first animation

Animation in Keyframe works as it does in After Effects. You give a property one value at one moment and another value at a later moment; the editor works out every frame in between. Each value you set at a moment is a keyframe.

Here you’ll move a rectangle from left to right in three seconds.

  1. Add a layer. At the foot of the Project panel, select New layer (the stack icon) and choose Rectangle Shape. A rectangle appears in the middle of the viewer, already selected: its row is highlighted in the Timeline, and Properties shows its settings.

  2. Start at the beginning. The time at the top left of the Timeline should read 00:00:00:00. If it doesn’t, drag the playhead back to the start of the ruler.

  3. Set the first keyframe. In Properties, under Layer Transform, find Position. Set X to 260 so the rectangle sits on the left, then select the stopwatch beside Position. A diamond appears in the Timeline at the playhead: your first keyframe.

  4. Move to a later time. Drag the playhead along the ruler to 03s.

  5. Set the second keyframe. Set X to 1020, or drag the rectangle to the right in the viewer with the Selection tool (V). Because Position is animated now, the change adds a second keyframe at the playhead, and a dotted line in the viewer shows the path.

  6. Play it. Press Space, or select Play Work Area in the Timeline. The rectangle glides from one keyframe to the other.

The Timeline, with the two keyframes of the Position property and the playhead between them.
  1. The current time.
  2. The playhead: drag it to move through time.
  3. The stopwatch: while it is on, the property is animated.
  4. A keyframe: the value set at that moment.

Change your mind at any time. Drag a keyframe sideways in the Timeline to change when it happens, or put the playhead on it and change the value. ⌘Z (Ctrl Z on Windows) undoes the last change; redo and the rest are under History shortcuts⁠ (opens in a new tab).

With the layer selected, press U to see only its animated properties in the Timeline. The keys that show other properties are among the View shortcuts⁠ (opens in a new tab).

Where to go next

The documentation’s chapters, in reading order. In the editor, Keyboard shortcuts under Help lists every key, and this documentation is always under Help → Documentation.