Keys and the timeline

A keyframe is a value at a time. Set a value at one time and a different one later, and PopCraft fills in between along the curve you pick.

1. 1.Select the layer and click ◆ to key it at the start0:00
2. 2.Open its row to see the properties it keyed0:01
3. 3.Click 1.00s on the ruler to move the playhead0:02
4. 4.Change a value: with Record on, that is a key0:02
5. 5.Press Home, then Space to play it0:04

Description

A launch post in Animate with the badge selected. The diamond in the transport bar keys the badge’s main properties at the start. Its row is opened to show them, the playhead is moved to one second, and Rotation is typed as −8: with Record on, that is a second key. Home and Space play the badge tipping over.

How to

Key a layer

1. Select the layer, and make sure Record (the dot in the transport bar) is on. It is on by default.
2. Click ◆ in the transport bar to key the layer's main properties where they are now, at the playhead. That's X, Y, width, height, rotation, opacity and fill colour.
3. Move the playhead: click or drag on the ruler, or type a time into the readout.
4. Change the layer. Move it on the canvas, type a value in the design panel or in its timeline row, or drag a slider. With Record on, the change becomes a key at the playhead.
5. Press Home, then Space to play it.

You can skip step 2. With Record on, changing any property away from the start of the timeline keys it, and PopCraft keeps its old value as a key at the start. With Record off, only properties that already have keys get new ones; other changes just edit the layer.

Make a logo reveal

1. Open the logo reveal template (New → File → Motion → Logo reveal), or any design with a mark and a wordmark.
2. Select the mark. At 0 s, set its scale to 0. At 0.7 s, set it to 100 %. Right-click the first key and choose Curve › Ease out · Back so it overshoots a little.
3. Select the wordmark. Key its opacity from 0 at 0.45 s to 100 % at 0.85 s, and its Offset Y from 90 at 0.45 s to 0 at 1.25 s, on Ease out · Expo.
4. Select the tagline and drag its bar to start at 1.1 s, so the three arrive one after another.
5. Press Space. Adjust until it feels right, then export it.

Change a key's curve, or nudge it

1. 1.Open the layer’s row to see its properties and keys0:00
2. 2.Right-click a key, then Curve › Ease in and out · Cubic0:00
3. 3.Click the key: the inspector shows its time, value and curve0:03
4. 4.Press → to nudge it a frame later (Shift+→ for ten)0:05

Description

A logo reveal in Animate. The wordmark’s row is opened to show its property rows and their keys. A key is right-clicked and Curve, Ease in and out · Cubic is chosen from its menu; the key inspector shows the new curve. The arrow keys nudge the key later, a frame at a time.

1. Twirl the layer open (the arrow by its name) to see its property rows and their keys.
2. Right-click a key, then choose a curve from Curve. Edit curve… opens the curve editor.
3. Click a key to pick it. The key inspector shows its time, value and curve, and the playhead jumps to it.
4. Press ← or → to nudge the picked keys a frame, or Shift+← / Shift+→ for ten.

Loop part of the timeline while you work

Put the playhead where the loop should start and press I. Put it where it should end and press O. Loop in the transport bar now plays only that range, which is the work area, and exports can render just that range too. Click the work-area button again to clear it.

Copy a move to another layer

Pick keys and press ⌘C (Ctrl+C). Select one or more other layers, put the playhead where the move should start and press ⌘V. The earliest key lands at the playhead. One layer's keys go onto every selected layer; keys from several layers map onto several selected layers in order. With nothing selected, the keys go back onto the layers they came from. Paths are matched by what they are, so a colour key on one layer's first fill pastes onto another layer's first fill.

The timeline

Drag its top edge to resize it; the chevron at the right of its header collapses it. The left column lists layers. By default it shows only the Animated ones plus what's selected; click the toggle to show All layers. The ruler runs along the top, and each layer's keys sit on its row.

The transport bar, left to right

While keys are picked, the bar also shows their label (Offset Y key or 3 keys), a curve menu, the curve editor button, Hold, Delete, and on a component's timeline where each key's value comes from (Own value, or a component input).

The ruler, markers and the end

• Click or drag on the ruler to scrub.
• Drag the work-area bar to move it, or its ends to resize it. It snaps to the playhead, the start, the end and frames.
• Drag the end line to change the timeline's length. Anything past the end is dimmed.
• Press M (or ;) to drop a marker at the playhead. Click a marker to jump to it, drag it to move it, and double-click it to name it, delete it or turn on Pause here when presenting (see Presenting). Pause markers are amber.

Layer rows

Each layer row has a twirl, its name (click to select), Solo (show only this layer, and others soloed, while you animate), Hide and Lock. A colour label shows down its left edge.

Twirl it open for a row per animated property. Each property row has:

• a stopwatch: Animate … starts a track; click it again to stop animating (which removes its keys);
• ◀ ◆ ▶: jump to the previous key (J), add or remove a key here, jump to the next key (K);
• a Behaviours button (the waves). See Behaviours. A property with behaviours shows a dashed lane on its track, described in words (Wiggle · 20 at 2 Hz);
• its value, which you can edit in place. Editing a value keys it at the playhead.

A key's shape says what its curve does. A diamond eases to the next key. A square holds its value and jumps at the next key (Hold, ⌘⌥H). Keys past the timeline's end are dimmed, and picked keys are filled with the accent colour. A layer's closed row shows every property's keys on one line, so a diamond there can stand for several. Twirl the layer open to see which property each belongs to. The curve between two keys is drawn in the graph editor (Shift+F3), not on the rows.

+ Property at the bottom of a layer lists everything else it can animate, grouped, and on a text layer the text animation items too. In the design panel, fields that can be animated (effects, shader params, text animator fields) carry a ◆ you can click to key them there.

Picking and moving keys

The key inspector

It shows the picked key's Time (in seconds, or in frames when the readout is in timecode), its Value and its Curve, with Edit the curve… to open the curve editor right there. With several keys picked, Time moves the first and the others keep their distance, and Value sets them all. A colour key's value is changed in the design panel at its time.

The key menu

Right-click a key for: Curve (every curve), Edit curve…, Hold, Copy key, Paste keys at the playhead, Reverse keys (with two or more picked; the curves reverse too), Select all on this property and Delete key.

The layer menu

Right-click a layer's row for: Add preset, Stagger children (50, 100, 150 or 250 ms apart, or No stagger; on a group or frame), Reverse keys, Select all keys, a colour Label (Violet, Green, Amber, Red, Purple, Blue, Pink or none), Solo and Clear animation.

Layer time

Every layer has a bar on the timeline showing when it plays. Drag the bar to slide the layer, and everything in it, in time. Drag an end to trim when the layer starts and stops existing. Bars snap to the playhead, markers, the work area and frames.

A group or frame with a live stagger draws a staircase over its children. Drag a step to change the spacing (see Presets and stagger).

Onion skin

The ghost button shows faded copies of the selected layers a few frames before and after the playhead. The number beside it sets how many ghosts each side, from 1 to 8 (2 by default). Ghosts are 3 frames apart.

Keyboard

In Animate, these keys work the timeline. They come before tool keys, so I and O set the work area rather than picking tools.

With no keys picked, Delete, the arrows and ⌘C keep their usual meanings, and nudging a layer with the arrow keys keys it when Record is on.

Reference: what can be animated

Every property is in one registry, so the timeline, the design panel, presets, exports and the agent agree on it:

A layer that auto layout places can't move by X and Y, since the layout owns those, so it moves by Offset X/Y instead. Colours and numbers glide from key to key; text and on/off values hold until the next key.

Shape morphing

A vector's Path is keyable: key it, move the playhead, and edit the points to key a new outline. Between keys the shape morphs from one outline to the next, even when they have different numbers of points or paths. The outline with fewer points gains points along its longest segments, which leaves its shape unchanged, and the two are turned to start near each other so the points take the shortest route. A path that only one key has grows out of a point. The Shape morph Lottie template morphs through four outlines with different point counts; open its Path track to see the keys.

A colour bound to a variable, such as a brand colour, can be keyed too. While the animation plays, the keys drive the colour, on the canvas and in every export (video, GIF, PNG sequence, Lottie). The fill or stroke stays bound to its variable, so at rest and outside Animate it shows the variable's colour.