Drag on an empty track to pick a bunch of keys. Shift or ⌘ adds. Drag them and they snap to the playhead, markers, the work area and other keys, then to frames.
A MOTION
STUDIO!
A real timeline, real curves and a graph editor, in the same file you designed in. Key it, preset it, stagger it, wiggle it, sequence it, and export an MP4 or a Lottie. No round trip to another app.
A launch post is open in the editor. Animate is picked in the top bar. The headline is selected and the Rise preset applied from the timeline’s + menu, then the Launch badge gets Pop the same way. Home goes back to the start and Space plays: the badge pops and the headline rises into place.
WHOOSH!
WHY IT EXISTS
Motion where the design lives
The usual way to animate a design: export the layers, open a motion tool, rebuild the type, guess the colours, animate, render, and then do all of it again when the copy changes. We have done that relay race. Our knees hurt.
So in PopCraft, Animate is a mode. Click it in the top bar and a timeline slides up under the canvas you were already working on. The layers are the same layers. The components are the same components. Change the button in the design and the animated button changes too, because there is only one button.
And it is not a toy timeline. It has keys you can marquee and Alt-scale, curves from Linear to real springs, a graph editor with value and speed, behaviours that move things with no keys, motion paths you bend on the canvas, per-letter text animators, compositions with transitions and eight audio lanes, and an export that goes to 120 fps.
120
fps, top frame rate
13
curve families, springs included
40
presets, from Fade in to Orbit
5
export formats, with sound
THE TIMELINE
Rows, keys and a playhead
Each animated layer gets a row. Twirl it open and every animated property gets its own row, with its keys on it. A diamond eases to the next key; a square holds and jumps. Picked keys light up in the accent colour.
The transport bar has what you expect and a few things you will be glad of: Record, a frame rate picker, seconds or timecode, a work area you set with I and O, markers with M, onion skin with up to eight ghosts each side, and the clapperboard for compositions.
The Logo reveal template in Animate with a tall timeline. The wordmark’s and the logo mark’s rows are twirled open to show a row per keyed property with its diamond keys. Home and Space play it: the playhead sweeps across the keys while the mark pops and the wordmark rises on the canvas above.
RECORD IS ON
Change a thing, get a key
With Record on (it is on by default), changing any property away from the start of the timeline keys it, and PopCraft keeps its old value as a key at the start. Move a layer on the canvas, type in the Design panel, drag a slider: each is a key at the playhead.
The ◆ in the transport bar keys the main properties all at once: X, Y, width, height, rotation, opacity and fill. Right where they are. That is the whole “first keyframe” ceremony.
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.
KEY WRANGLING
Pick, drag, scale, paste
ALT-SCALE
STRETCH!Alt-drag picked keys to scale their timing about the far end. Drag past it to reverse them. A move that is too slow is one drag from right.
COPY A MOVE
CLONE!⌘C the keys, select other layers, ⌘V. The earliest key lands at the playhead. Colours paste onto colours, paths onto paths.
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.
The Kinetic headline template in Animate, zoomed on its frame. Space plays it: the headline’s words punch in one after another and the highlight pill slides under the key word, all from ordinary keys and curves on the timeline below.
EASING
Curves, drawn for real
A key’s curve decides how the value travels to the next one. Here are eight of them, plotted as value over time. PopCraft has Linear, Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, Bounce, Spring and Hold, each in, out or in and out, plus any cubic-bezier you shape or paste as CSS.
Constant speed. Robots love it.
Gentle landing
Slow, quick, slow
Rockets in, settles forever
Overshoots, comes back (1.70)
Springs past it, several times
A dropped ball
Stays put, then jumps
Springs are a real simulation: gentle, quick, bouncy or slow, or your own stiffness, damping and mass. New keys use Ease in and out · Quad, which is also what F9 gives you.
THE CURVE EDITOR
Pick a family, then bend it
Click a key, then Edit the curve…. Pick a tile, choose In, Out or In & out, and drag either handle. A named curve turns into the closest bezier first, so nothing jumps. Handles go above and below the box for overshoot and anticipation.
The readout at the bottom is the CSS, cubic-bezier(x1, y1, x2, y2). Copy this curve and paste it onto other keys, or paste a curve you copied from a stylesheet. Your developer will love you a little.
A logo reveal in Animate with the wordmark’s rows open. A key is clicked and Edit the curve… opens its curve editor in the key inspector. The Back tile is picked, which overshoots and settles, then a handle of the curve is dragged, which turns it into a custom bezier. The playhead plays the new move.
THE GRAPH EDITOR
See the speed, not just the value
Press Shift+F3. The key rows give way to curves, one per animated number. Value shows where each value is over time. Speed shows how fast it changes, and that is where you see a move that drags or a stop that is too sudden.
Drag a handle in Speed mode: up and down is speed, left and right is influence. If you have used After Effects, your hands already know this. Scroll to pan, ⌘-scroll zooms time, Shift-scroll zooms values.
A logo reveal in Animate with the wordmark selected. Shift+F3 swaps the key rows for the graph editor, showing the wordmark’s value curves. Speed shows how fast each value changes instead. A key is picked and its handle dragged to make the move start faster and settle longer; the curve and the playback follow.
ONE CLICK
Presets that write real keys
A preset is not a black box. It writes ordinary keys on the layer’s own properties, relative to where the layer rests: an entrance ends at rest and an exit starts there. Everything it makes is on the timeline to edit, and its settings stay live until you edit the document.
ENTRANCE · EXIT
HELLO!Fade, Rise, Drop, Pop, Scale, Slide, Wipe and Blur, in and out. Wipes build an ordinary mask you can edit.
EMPHASIS
BOING!Pulse, Shake, Bounce, Wobble, Flash and Impact frame: a held, inverted flash for a hit, on a Difference layer.
CAMERA
WHOOSH!Push in, Pull out, Dolly, Drift, Zoom through, Camera shake and Whip pan, plus Truck, Crane, Pan and Orbit in 3D.
A tips post in Animate. With the first tip row selected, the other rows are added with Shift-click. From + in the timeline, Rise is applied to all of them; the Stagger field sets how much later each row starts. Space plays the rows rising one after another.
A launch post in Animate with its badge selected. From + in the timeline, the Emphasis tab’s Bounce is applied, then Home and Space play the badge hopping and bouncing back down. Wobble is added the same way and the badge rocks about its anchor.
RHYTHM
Stagger: the difference between a list and a slideshow
Apply a preset to several layers and set Stagger: each starts that much later than the one before. Stagger order picks who goes first: layer order, selection order, reverse, from the centre, or random (seeded, so it is the same random every time).
Already animated? Right-click a group’s row and choose Stagger children: 50, 100, 150 or 250 ms apart. That is a live stagger. The timeline draws it as a staircase over the children, and dragging one step respaces them all.
NO KEYS NEEDED
Behaviours move things on their own
A behaviour moves a property with no keys at all: Spin, Sine drift, Sine pulse, Wiggle and Decaying bounce. Put one on a keyed property and it stacks on top of the keys.
The loops are behaviours too: cycle, ping-pong, offset (a walk cycle that travels) and continue. Then Wrap, Clamp, Link (a pick-whip to another layer) and four audio behaviours that follow the music. Every one is worked out from the time, so even a wiggle plays the same on every play and every export. Key a wiggle’s amount down to zero and it settles.
A shader title card in Animate with its episode tag selected. The tag’s rows are opened, Rotation is added from + Property, and from the wave button on that row the Wiggle behaviour is added. Its amount and frequency show in the list. Space plays the tag wobbling on its own, with no keys.
ON THE CANVAS
Bend a motion path with your hands
Key a layer’s position and its path appears on the canvas, a dot per key. Click a dot and drag its handle: the path bends, and the other handle mirrors it. Hold Alt for a sharp corner.
Progress along a curve follows the distance travelled, eased by the key’s curve, so a curved path does not speed up on the bends. Drag the anchor to change the pivot, even outside the layer, for a swinging sign. The handles are stored on the keys, so a curved path goes out to Lottie as a curved path.
A logo reveal in Animate whose logo mark travels in from the lower left. With the mark selected, its motion path is drawn on the canvas with a dot at each key. The middle dot is clicked to show its handles, and a handle is dragged so the straight path becomes a curve. Space plays the mark sweeping along the curve.
TYPE THAT MOVES
Letters, words, lines and counters
Select a text layer, open Text animation, and pick Letter by letter, Word by word, Line by line or Typewriter. You get a cascade keyed at the playhead.
Underneath it is a text animator you can open: pick the unit, the order (first to last, last to first, from the centre, random), the stagger, and what each unit does: Move X, Move Y, Scale, Turn, Opacity, Blur and a Tint. Key its Offset and the selection sweeps across the line. Or select “$1,200” and choose Count up to its figure, with a prefix, suffix, decimals and your thousands separator.
A launch post in Animate with its headline selected. In the Design panel, the Text animation section’s Animate menu has Letter by letter: a text animator cascades each letter in from the playhead. Space plays the headline arriving a letter at a time.
THE BIG PICTURE
Compositions: scenes, transitions, sound
Every frame keeps its own timeline. A composition plays frames one after another as scenes: select frames, click the clapperboard, New composition from frames. Trim a scene by dragging its edge and the later ones ripple along.
Transitions sit at the cuts: Dissolve, Slide, Push, Move out, Circle wipe, Iris, Zoom through, a motion-blurred Whip pan, and 3D ones (Cube, Carousel, Flip, Swing, Stack, Depth push). Up to eight audio lanes run under the scenes, and PopCraft can find the beats and cut to them. We made a whole launch trailer this way.
A four-frame story ad in Animate. From the clapperboard in the transport bar, New composition from frames puts every frame on a scene strip. The + at the first cut adds a transition, and in the clip inspector it is changed to Push from the left. Play from just before the cut shows the second scene pushing the first out.
A five-scene story ad in Animate, its frames side by side on the page. Shift+F turns on Stage view: the other frames and the page chrome go, and the frame the timeline is on fills the canvas, letterboxed like a player. Space plays it; Shift+F again brings the whole page back.
FINGERS, MEET KEYS
The shortcuts you will use every minute
If your hands learned another motion tool, most of this will feel familiar. The full list is in the docs.
SpacePlay / pause
Home · EndStart · end
, · .Step a frame
I · OWork area in · out
MDrop a marker
J · KPrevious · next key
← · →Nudge keys a frame
F9Easy ease
⌘⌥HHold
Shift+F3Graph editor
Shift+FStage view
⌘C · ⌘VCopy keys · paste at playhead
FROM ZERO
Your first animation in six moves
- 1
Switch to Animate
It is a mode in the top bar, not another app. Your frames stay where they are; a timeline opens under the canvas. - 2
Key it, or preset it
With Record on, move the playhead and change anything: that is a key. Or click + and pick a preset like Rise or Pop. - 3
Shape the move
Right-click a key for a curve. Edit the curve for an overshoot. Shift+F3 for the graph editor when you want to see the speed. - 4
Give it rhythm
Stagger a list, bend a motion path on the canvas, add a wiggle that needs no keys, or make a headline arrive a letter at a time. - 5
Sequence it
Select frames, then New composition from frames. Each frame becomes a scene; add transitions and music under them. - 6
Export
MP4 or WebM with sound, GIF, PNG sequence or Lottie. Up to 120 fps and 4K, rendered by the same sampler you scrubbed with.
SHIP IT
MP4, WebM, GIF, PNG or Lottie
One dialog for all of it. MP4 (H.264) and WebM (VP9 or AV1) with the composition’s sound, at 24 to 120 fps, at source size, 720p, 1080p or 4K. GIF with a shared palette so it does not flicker. A PNG sequence for your editor. Lottie JSON or dotLottie for an app.
It renders frame by frame through the same sampler the timeline plays with, and streams to a file. What you scrubbed is what you get, and a long 4K render does not fill memory. When Lottie cannot carry something, it says which layer and why, instead of quietly dropping it.
A logo reveal in Animate. The download button in the transport bar opens Export animation. MP4 shows frame rate, range, resolution and quality with a summary of the size; GIF switches to palette, dither and loop settings; Lottie lists what the file can carry. The frame rate is set to 120 fps for MP4.
THE OLD WAY
Design tool, then motion tool, then pain
| THE OLD WAY | IN POPCRAFT |
|---|---|
| Export layers, rebuild them in a motion tool | Click Animate. Same layers, same file. |
| Copy changes? Do it twice. | Change the component once, the animation follows |
| Eyeball easing from a dropdown | Curve editor, graph editor, springs and CSS beziers |
| Keyframe a wiggle by hand | A behaviour, seeded, with no keys at all |
| Export a video, then a separate Lottie | MP4, WebM, GIF, PNG and Lottie from one dialog |
ASK FOR IT
Or let the agent do the keying
Every Animate action is an agent tool. Ask for “the headline types on letter by letter, then the logo pops in half a second later” and the agent reads the layers, picks presets or keys, and staggers them. Every edit is one undo step, named for what it did.
A launch post, signed in. The Agent rail button opens the agent panel. The headline is selected, and a request is typed in words — type the headline on letter by letter, then pop the badge in half a second later — ready to send. Manage lists the skills it can pull in, Motion design among them.
A pitch deck slide in Animate whose three points arrive one after another. Its markers sit along the ruler, the amber ones pauses; double-clicking one shows its editor with Pause here when presenting on, and M adds another at the playhead. In present mode, the arrow key moves to the slide and then plays it on to its next stop each time, a point at a time.
PRESS SPACE
Make something move today
Open any design, click Animate, select a layer and pick Rise. Then press Space. The first animation guide takes two minutes, and the rest of the Animating docs cover every control.
ASKED & ANSWERED
Questions, answered
Is this a separate app?
No. Animate is a mode of the same editor. The layers you animate are the layers you designed, with the same components, styles and brand colours, so changing a design changes the animation that uses it.
What can be animated?
Position, size, rotation, scale, opacity, anchor, corner radius, fill and stroke colours, effects, shader params, 3D placement, camera and lights, text animator fields and more. Fields in the Design panel that can be animated carry a ◆ you click to key them.
Does it have a graph editor?
Yes. Shift+F3 swaps the key rows for value and speed graphs. In Speed mode, up and down is speed and left and right is influence, the way After Effects works.
Which frame rates are there?
24, 25, 30, 50, 60 and 120 fps. The timeline snaps keys, the playhead and nudges to its frame rate, 60 by default. Exports can use the timeline’s rate or any of those.
Can I hand animations to a developer?
Yes: export Lottie JSON or a dotLottie. If something cannot be carried, like a shader or a 3D layer, the dialog names the layer and why. Motion components also export to web code as CSS animations.
Can the agent animate for me?
Yes. Every Animate action is an agent tool: keys, curves, behaviours, presets, staggers, text animators, compositions, audio and export. Ask for a result in words and it uses the same commands the timeline uses.
WHOOSH! YOUR TURN.
A real timeline, real curves, in the file you designed in. Free to start, in your browser or on your Mac.