Animation (timeline and keyframes)

Keyframe animation is made in the timeline at the bottom of the canvas.

Turning the timeline on

The Timeline menu (Mac and iPad) carries the timeline bar's commands: Enable Timeline, Play / Pause, Go to Start / End (Home / End), Previous / Next Frame (⌥← / ⌥→), Previous / Next Keyframe (⇧⌥← / ⇧⌥→, or J / K on the canvas — like After Effects), Loop Playback, Play Full Screen (⇧⌘F), and Add Keyframe (⌥⌘K), Copy / Paste / Delete Keyframe, Reverse Keyframes, Add Marker (or M on the canvas), Previous / Next Marker (⌥⌘← / ⌥⌘→) and Loop Between Markers. On iPad, Space plays and pauses.

Press Enable Timeline at the bottom to activate it.
Hover the top edge of the timeline panel for a resize cursor and drag to change its height (useful with many tracks).
The ruler shows time ticks (1s, 2s …) for the whole duration; drag on it to move the playhead (red line) and preview that moment.
The ⋯ menu to the right of the controls has display options — for example Show Easing Curves (off by default) — and Zoom In / Zoom Out / Zoom to Fit for the tracks.
Name column: drag the divider between the layer names and the tracks to make the names wider or narrower (deep groups indent their rows); the width is remembered. On iPhone and iPad drag the small handle on the divider.
Zoom: at 1× the whole timeline fits; zoomed in (up to 16×) the ruler and tracks scroll sideways together while the layer names stay put. Scroll the tracks with the trackpad, or just move the playhead — the view follows it when it leaves the middle of the tracks.
The duration field (seconds) next to the time display sets the whole timeline's length (adjust it here after a video import extends it automatically).
Playback controls (left to right): go to start ▎◀ · previous keyframe ⇤ · one frame back · play / pause ▶ · one frame forward · next keyframe ⇥ · go to end ▶▎ · loop toggle ↻ · playback speed (0.25×–4×, default 1×) · play full screen (the screen-with-play icon).
Previous / next keyframe jumps the playhead to the nearest keyframe of the selected layers (and what is inside a selected group) — or of every layer when nothing is selected. Children of a group with its own timing are found where they actually play.
Playback follows real time — if a frame is slow (video decoding, say) the clock keeps up by skipping frames, so the total length never stretches. With loop on (highlighted) it starts over at the end; off, it plays once and the playhead returns to the start, ready to play again. Frame stepping and start/end jumps pause playback.

Play full screen

Watch the piece the way your audience will: Timeline ▸ Play Full Screen (⇧⌘F), the timeline bar's play-full-screen button, or right-click an empty part of a frame ▸ Play Full Screen. The frame plays on a black screen, as large as fits (its proportions kept, black bars where the shapes differ), with its sound, at real speed (the playback-speed setting is for editing).

It starts from the beginning. To start at the playhead, hold ⌥ (Play Full Screen from Playhead, ⌥⇧⌘F, or ⌥-click the button); iPhone and iPad: ⋯ ▸ Play Full Screen from Playhead.
With Loop Playback on it loops; off, it plays once and stays on the last frame.
Mac: press Esc (or ⌘.) to return to the editor — the playhead is where you left it. Space pauses and resumes. The pointer hides after a moment; move the mouse to bring it back. A frame without a timeline is simply shown full screen.
Several displays (Mac): Timeline ▸ Play Full Screen On lists This Screen (the one with the document window) and your other displays by name. Your choice is remembered — ⇧⌘F plays there next time (or on this screen if that display isn't connected). While it plays on another display the editor stays usable, and you keep editing: changes show up in the playback. Esc stops it from any Layerz Canvas window. Playback stops by itself if its display is disconnected, or — when it covers the document's own screen — if you switch to another app.
iPhone and iPad: tap anywhere to stop and return (Esc or ⌘. with a keyboard; Space pauses). The screen stays awake while it plays. With an external display connected, iPad mirrors the playback to it.

Present your frames

Presentation Mode shows your frames full screen, one after another — for a talk, a client demo, or clicking through an app flow as a prototype.

View ▸ Present (⌥⌘P) starts at the first slide; Present from Current Frame (⇧⌥⌘P) starts at the frame you're editing. The toolbar's Present button (▶︎ in a rectangle) does the same. iPhone and iPad: ⋯ ▸ Present (and the iPad's View menu).
Going on: click, or press → ↓ Space, Return or Page Down. A frame with a timeline plays its animation from the start when it appears; a click while it's still playing shows its end at once, the next click goes on. After the last slide the presentation ends.
Going back: ← ↑ ⇧Space, Delete, Page Up or a right-click retrace the slides you actually saw (links included). Home / End jump to the first and last slide.
Ending: Esc (or ⌘.) — from any Layerz Canvas window — returns to the editor exactly as you left it (the playhead doesn't move).
A slide counter ("3 / 12") and a thin progress bar show briefly at the bottom on each change, then fade. The pointer hides after a moment without movement.
Displays (Mac): with two or more displays, View ▸ Present On chooses the screen — the same choice as Play Full Screen On, remembered. If that display is disconnected the presentation ends; on the document's own screen it also ends when you switch to another app.
iPhone and iPad: tap for the next slide; tap near the left edge or swipe right to go back, swipe left to go on, swipe down (or the ✕ that appears with the counter) to end. With a keyboard the Mac's keys work. The screen stays awake; leaving the app ends the presentation. An external display mirrors it.

Presentation Settings (View ▸ Presentation Settings…, iPhone/iPad ⋯ ▸ Presentation Settings):

Slides — every frame, checked = shown. Drag to change the order. By default all frames are slides in canvas order and new frames join automatically; once you uncheck or reorder, new frames stay out until you check them.
Scale — Fit to Screen (as large as fits, proportions kept, bars around it — small frames are enlarged) or Actual Size (1 point = 1 point, centred; larger frames are cropped). Each slide can override it (the slider button on its row).
Per slide also: Loop the animation (frames with a timeline; otherwise it plays once and stays on its last frame) and Next slide after … s — moves on by itself that many seconds after the animation ends (on arrival for a still frame).
Background — the colour around the slides (black by default). Reset goes back to all frames, Fit, black.

Links (clickable prototypes): select a layer, group or frame and choose a frame in the inspector's Link to Frame (Layer section). While presenting, clicking it opens that frame (the pointer turns into a hand on the Mac); the innermost linked layer under the click wins, and anywhere else a click is "next". After a link, the slide list goes on from the target. A frame that isn't on the slide list can only be reached through links, and "next" there ends the presentation — handy for hidden screens. The layer panel marks linked layers with ↗; a link whose frame was deleted reads Missing frame and is ignored.

The settings are saved with the document (in its own file inside the package, so opening it in an older Layerz Canvas keeps them). Slide transitions, presenter notes and exporting a clickable HTML version are not available yet.

Creating keyframes

Select one layer.
Move the playhead to the time you want.
Press Add Keyframe to record the current pose (position, size, scale, rotation, opacity, fill colour, path) as a keyframe.
- Adding the first keyframe somewhere other than t=0 also creates a baseline keyframe at t=0.
Move to another time and change values (see "Automatic keyframes"); the two keyframes are interpolated.

Animate presets (entrances and exits)

Right-click layers (on the canvas or in the layer panel) ▸ Animate for ready-made motion: Fade In / Out, Slide Up · Down · Left · Right In / Out, Pop In / Out (with a slight overshoot), Rotate In, Blur In / Out and Draw Line (a stroke drawing itself).

It starts at the playhead and lasts 0.6 s. Entrances end at the layer's current look; exits start from it.
With several layers selected they move one after another (0.08 s apart), top of the layer list first.
The result is ordinary keyframes — move, retime or delete them on the timeline. The timeline is created or lengthened if needed. Groups move with everything in them.

Your own presets

Select a layer with keyframes ▸ right-click ▸ Animate ▸ Save Animation as Preset… (iPhone / iPad: … ▸ Animate). Give it a name and choose Relative — moves, sizes and turns are stored as offsets and scale as a factor, so the motion fits any layer wherever it is — or Absolute — the exact values. With keyframes selected on the timeline, only their stretch of time is saved. Loops, wiggles and oscillators come along.
Saved presets appear in the same Animate menu, under the built-in ones, and apply like them: from the playhead, one layer after another. Delete Preset ▸ removes one. They are kept on this device (Application Support), not in the document.

Physics (falling, bouncing, piling up)

Select layers ▸ right-click ▸ Animate ▸ Physics… (on iPhone and iPad: … ▸ Animate ▸ Physics…): the layers fall from where they are at the playhead, bounce off the bottom of the frame, its sides and each other, then settle — blocks and letters stack and pile up.

Start — Drop (let go), Toss Up, Throw Left or Throw Right. Gravity — Light, Normal or Heavy. Bounciness and Friction.
Floor (the frame's bottom edge) and Walls (its sides) can be turned off — without a floor, layers fall out of the frame. Tip over and spin off = layers only move, never turn.
With several layers selected, tick the ones that should stay in place: the others land on them (a shelf, a ground bar, a word to pile letters on).
Round ellipses roll like balls; every other layer (text, groups, images…) collides as its rotated box.
The result is ordinary Position X / Y and Rotation keyframes — only the keys the motion needs (impacts and the tops of bounces, usually two or three per bounce), so it edits, retimes and exports everywhere (Lottie and HTML too). It replaces those keyframes from the playhead on; earlier ones stay. The simulation runs until everything rests (at most 5 s); the same layers and settings always give the same motion. Run it again after you move things.

Text animation (kinetic type)

Select a text layer and use the inspector's Text Animation section to make its characters, words or lines move one after another.

Add Animation — Fade, Rise, Drop, Slide Left / Right, Pop, Blur, Rotate, Typewriter, Wave, Decode (letters show random characters until they land), Tracking In (letters spread wide and close up), Colour In (letters arrive in a colour and fade to their own).
Direction — In (appear: from the start state to the normal text) or Out (leave: from normal to the end state).
By — Character / Word / Line (wrapped lines count; spaces don't). Order — Forward, Backward, From Center, Random.
Timing — Start (timeline seconds), Length (how long each one moves), Delay (between one and the next). Easing — Ease Out / In / In Out, Linear, Spring (bounces), Back Out (overshoots), Expo Out (fast, long settle), Hold.
Starts from / Ends at — offset X/Y, scale, rotation, opacity and blur of the moving state, plus:
- Colour — the letters take this colour in that state (it mixes over their own paint, gradients too).
- Tracking — extra space after each letter; the rest of the line moves along (centred text stays centred).
- Scramble — letters show random Characters (changing so many times a second) until they arrive — a decode.
Range Selector — instead of one after another, choose *which* letters (words, lines) take the state, like After Effects: Start and End (percent of the letters, in the animator's order — Random order scatters them), Offset (moves both), Shape — Square (letters partly inside count in part), Ramp Up / Ramp Down (soft edge: letters past the range stay selected / before it), Triangle, Round, Smooth (peak in the middle) — and Amount. Start, End and Offset have keyframe diamonds: key Offset from −30 % to 100 % with a Triangle range 30 % wide and offset Y −20 for a wave running through a word; key it with Ramp Up and opacity 0 for a soft wipe-on. Without keyframes a range is a still design — e.g. one word in a highlight colour. Direction and timing don't apply while the range is on.
Add several (e.g. an In at 0 s and an Out at 3 s). They show on the canvas, in playback and in PNG, video and GIF exports and in HTML. SVG shows the frame at the playhead (letters as outlines while they move; blur left out). Lottie writes each letter as an outline group with its motion, opacity and colour baked in (scramble too); blur, and animators on text whose content, size or tracking is keyframed, are left out with a note.

Loop and wiggle

Select a keyframe on a property sub-track (expand a layer's track) to get two buttons in the timeline bar:

Loop — after the last keyframe, Cycle (start over) or Ping-Pong (back and forth) instead of holding. Great for spinning icons or breathing glows.
Wiggle (number properties) — smooth random motion on top of the keyframes: Frequency (wobbles per second), Amount (how far either way) and Seed (a different but repeatable pattern). Use it for floating badges, shaking or flickering. Start and Stop (seconds; 0 = from the beginning / never) limit when it plays, and Fade eases it in after the start and out before the stop — a shake that settles at 2 s.

Motion behaviors: oscillate, link, drive with sound

Right-click a keyframe diamond in the inspector (long-press on iPhone / iPad) ▸ Motion Behaviors… to move a property without keyframes. Pick the Property, then:

Oscillate — a repeating wave added on top of the property's keyframes (or its value when it has none): Wave Sine, Triangle, Square (on / off) or Noise (smooth random), Amount (how far either way), Frequency (cycles per second), Phase (where in the cycle it starts, 90° = at the peak), Decay (dies away — 2 settles in about two seconds) Start (it rests until then), Stop (it stops then; 0 = never) and Fade (seconds it takes to ease in after the start and out before the stop). A pendulum, breathing, a blinking cursor, a wobble after an impact.
Link to Another Layer — the property follows another layer's property: Multiply, Add and Delay (seconds behind). By default it copies the other layer's movement (how far it has moved from where you put it), added to this property's own value; Use Its Value takes the value itself (rotation = the other layer's X × 0.5). A shadow that trails a ball, gears that turn together, a dot that copies a wave. Links can chain (A → B → C); a link that would loop is refused.
Drive with Sound — choose a sound or video layer: Loudness follows its volume (quiet → Quiet value, loud → Loud value; Release = how fast it falls back), Beats pulses to the Loud value on every beat and eases back. This is baked into a few ordinary keyframes (fitted, not one per frame); the settings stay with the property.

Behaviors show on the canvas, in playback and every export: HTML plays oscillators and links live; Lottie and video get them baked.

Counters, font size and tracking

Turn on Counter in a text layer's inspector to make it a number: Number (with a keyframe diamond), Decimals, Prefix / Suffix (e.g. "$" or "%") and Thousands Separator. Keyframe Number at two times and it counts between them ("$0" → "$1,250.00").
Size and Tracking of text have keyframe diamonds too — grow a headline or spread its letters over time. Auto-width/height boxes follow.
Corner radius (rectangles, polygons), a polygon's Points (between two keys the shape changes smoothly — a corner grows out of the first one or folds into it, so 4 → 3 doesn't jump) and a star's Inner Radius, the first shadow (offset, blur, colour — diamond next to it), Glow (radius, colour) and Grain amount take keyframes too: a button that rounds off, a star that sprouts points, a card whose shadow lifts. They play in HTML; Lottie keeps the corner and star keys (as its own rectangle and star) but not the effects.
Text on a path has an Offset diamond (Text on Path section): key 0 % and 100 % and the text runs once round a circle — loop the track with Cycle for endless rotation. It works together with text animation.

Motion blur

Timeline options (⋯) ▸ Motion Blur in Exports smears fast motion in video, GIF/APNG and PNG-sequence exports: Shutter 90° (light) / 180° (film) / 360° (strong) and Quality (how many moments each frame averages: 4 / 8 / 16 — more is smoother and slower). The canvas preview stays sharp.

Group timing (reusable animation)

Select a group or frame and turn on Own Timing in the inspector's Timing section: everything animated inside plays on the group's clock — Starts After (delay), Speed (2 = twice as fast) and Loop (Cycle / Ping-Pong, with a Loop Length). Duplicate an animated group and give the copies different delays to reuse one animation. In the timeline the group's row gets a clock mark and its layers are listed under it, their keyframes drawn where they actually play — delayed, faster or slower — with faint copies where a loop (or a time remap) plays them again. Dragging them moves them in the group's own time.

Time Remap (Timing ▸ Time Remap ▸ Add Time Remap Keys) bends the group's time freely: keys on the group's Time Remap row say which moment of its children shows at each time — key the same value twice for a freeze frame, a smaller slope for slow motion, a falling value to play backwards. The first keys match the clock you had, so nothing changes until you edit them; Remove Time Remap goes back to the clock. Video frames and text animation inside follow it. HTML plays it; Lottie bakes the children's keys on it.

Camera

Right-click layers ▸ Focus Camera Here: from the playhead the view pans and zooms (0.8 s) so they fill the frame; Reset Camera goes back to the whole frame. Redoing a move at the same time also updates where the next move departs from. The first time, the scene is put in a Camera group, and camera moves are keyframes on it — edit them on the timeline like any others. Layers outside the Camera group (titles, captions) stay fixed on screen.

Depth (parallax). Select a layer directly inside the Camera group and set its Depth in the inspector's Layout section: 0 is the camera's focal plane, a positive depth is farther away and a negative one nearer. When the camera pans or zooms, far layers move and grow less and near layers more — like a real camera — so a parallax scene needs no keyframes on its layers: put the sky at 800, hills at 300, the foreground at −100 and move the camera. With the camera at rest every layer looks exactly as you placed it. Depth takes keyframes (a layer can drift towards the camera), and a layer that ends up at or behind the camera isn't drawn, so negative depths fly past the lens. Stacking follows the layer list — unless the Camera section's Sort by Depth is on: then the camera's layers are drawn far to near by their depth, even while it animates (cards that pass through each other). Video, GIF, PNG and HTML exports show the sorted order; Lottie keeps the layer order (it warns).

Select the Camera group to edit its lens in the Camera section: Perspective is how far the camera is from depth 0 (smaller = stronger parallax, default 1000 pt). Depth of Field blurs layers by how far their depth is from Focus Depth (Blur per 100 pt, up to Max Blur); key Focus Depth for a rack focus. Depth of field blurs every layer of the scene each frame, so playback and export are slower — turn it on only when you need it.

Transitions

Select two layers (usually two scene groups) ▸ right-click ▸ Animate ▸ Transition: Crossfade, Push (4 directions), Slide Over (the upper one covers the lower one), Zoom Through, Blur Through — from the lower layer in the list to the upper one, starting at the playhead (0.8 s). The incoming scene is hidden before and the outgoing one after.

Morphing shapes

Path keyframes blend between any two shapes, even with different numbers of points (a circle into a star): points are added to the simpler one and the shapes are lined up so they don't twist. Arrange ▸ Union / Subtract / Intersect / Exclude combine selected shapes (same parent) into one path.

Beats and markers

Right-click an audio or video layer in the layer panel ▸ Detect Beats: its beats become orange markers on the time ruler, and keyframes you drag snap to them. For music the app made (Add Soundtrack) the markers are the exact beats it was written on. Timeline options (⋯) ▸ Clear Markers removes them.

Add a marker of your own at the playhead with M on the canvas, Timeline ▸ Add Marker or the timeline options (⋯) ▸ Add Marker — for cues like "logo lands" or "drop".
Drag a marker along the ruler to move it (it snaps like keys; hold ⌘ on the Mac to move it freely). Double-click it (Mac) or use its menu (right-click on the Mac, press on iPhone and iPad) to Rename, Go to or Delete it. A named marker shows its name on the ruler. A beat marker you move becomes an ordinary marker, so the next Detect Beats keeps it.
Previous / Next Marker (⌥⌘← / ⌥⌘→) jumps the playhead between markers.
Loop Between Markers (Timeline menu or ⋯): playback repeats the stretch between the markers around the playhead — rehearse one beat of the scene without the rest.

Soundtrack and sound effects

Layerz Canvas can make the sound for a finished video itself — music written to fit this timeline, and effects on its clicks and transitions. Everything is synthesized on your device (no downloads, no recorded samples), and you may use the result freely in your videos.

Timeline options (⋯) ▸ Add Soundtrack… (also Timeline ▸ Add Soundtrack…) opens a sheet: Mood (Upbeat Tech, Chill Lo-fi, Cinematic, Minimal, Energetic, Corporate), Intensity, Automatic tempo (or a set BPM), Key, Separate stems (drums, bass and music as three layers, to balance them yourself) and Sound effects with a Style (Soft, Punchy, Retro). Preview plays the whole mix; Another Version writes different music with the same settings. Add puts it on the timeline.
The music follows the video: the tempo is chosen so the scene changes (push, slide, zoom, blur and crossfade transitions, cuts, and cue markers) fall on bar lines; each section between them gets its own energy (instruments join as it builds), the bar before a change has a riser and a drum fill, the change itself a hit, and the last chord ends exactly at the end of the timeline. Its beats become markers on the ruler, so keyframes snap to the music.
Sound effects are found from the motion: virtual-cursor and recorded clicks, pop-ins, big moves and push / slide transitions (a whoosh that travels left or right), zoom and blur transitions (a riser and a hit), typing code and typewriter text (keystrokes), counters (ticks), text animations (a soft sweep), particles (a burst or sparkles), charts growing in (a rising run of notes) and hard landings (a thud). The Style sets their character: Soft (rounded, close UI sounds in a small room — demos), Punchy (crisper and heavier, with low end — ads) or Retro (8-bit console sounds). Effects sit where the thing is on screen (left / right), each click or key sounds a little different from the last, and every kind is levelled to sit with the music. Each effect is its own audio layer — or one combined Sound Effects layer when there are more than twelve. Add Sound Effects in the ⋯ menu adds just the effects for the whole timeline; right-click a layer ▸ Add Sound Effects adds them for the selection only (iOS: … menu).
The music is mastered for the web (about −14 LUFS, never clipping) and steps back a little under sound effects, voice-over and video sound that are already on the timeline — so add effects first.
Generated sounds are ordinary audio layers: volume, fades, mute, trim and split work as usual, and they are mixed into video and HTML exports. They remember how they were made: after you change the timing, ⋯ ▸ Regenerate Soundtrack makes them again to fit (your volume, fades and mute are kept).

Follow a path (motion path)

Select a layer and a shape (a path you drew, an ellipse, a rectangle or a polygon) ▸ right-click ▸ Animate ▸ Follow Path… (also in the layer panel's row menu; on iPhone / iPad in … ▸ Animate). The layer's anchor travels along the shape's outline from the playhead:

Duration, From / To (percent of the path's length — a closed shape wraps, so 0 → 200 % goes round twice) and Easing. The pace along the path is even: the easing alone speeds it up or slows it down.
Turn Along the Path makes the layer face the way it travels (its own rotation stays on top — draw it pointing right).
Path: Remove the Path (the layer keeps its own copy of the outline), Keep the Path (as a visible guide), Draw a Trail (the shape draws itself behind the layer — its Trim End runs with it) or Comet Trail (the trail's end follows a moment behind, set by Tail, and catches up at the end).
The motion is Path Progress keyframes. The inspector's Follow Path section shows Progress (with a keyframe diamond — add keys, loop the track with Cycle for an orbit, or wiggle it), Orient to Path and Remove from Path. Moving the layer moves its path with it.
With the layer selected, its path shows on the canvas in purple: drag its anchors and handles to reshape the route (the layer keeps its place on it; double-click an anchor to make it a corner or smooth).
Video, GIF, HTML (the player moves the layer along the path) and Lottie (position and rotation written as keyframes) exports all show it; SVG shows the layer where it is.

Repeat, cascade and reshape

A shape's Repeater (inspector ▸ Modifiers) makes up to 200 copies in a line, a grid or a ring — one layer, however many copies, so the timeline stays light. Everything on it animates:

Animate the repeater: Copies, Offset, Rotation (a ring's start angle) and Scale have keyframe diamonds — copies appear one by one, a fan opens, a ring spins.
Cascade the copies: give the layer one animation (a pop-in, a slide, a colour change) and set the repeater's Delay — each copy plays it that much later than the one before. With Falloff ▸ From the Centre and Delay Follows Falloff, a grid ripples out from its middle.
Falloff scales, turns, fades and tints the copies along their order (or out from the centre), with an easing curve.
Shape Modifiers reshape the outline itself — Round Corners, Zig Zag (sharp or wavy lines), Wiggle Path (a hand-drawn wobble that moves as it plays), Offset Path and Pucker & Bloat — in a stack you can reorder; their amounts take keyframes.
Exports: video, GIF and PNG are exact. HTML writes the copies out (late copies keep their own timing) and samples moving outlines. Lottie keeps a plain line repeater and Round Corners / Zig Zag / Offset / Pucker & Bloat as its own animated items, and writes grids, rings, falloffs and delays out as copies (a Wiggle Path as path keyframes). SVG draws the copies and outlines as they are at that moment.
AI assistants can do all of this in one call: set_modifiers and choreograph (AI assistants).

Follow

Inspector Layer ▸ Follow links a layer to another one: it moves, turns and scales along as that layer animates away from its own pose — like parenting, without grouping (an arm and a hand, a label and its card). The selection box shows the layer's own position.

3D rotation (2.5D)

Layout ▸ 3D Rotation turns a layer in depth: X tips the top edge away, Y turns the right edge away; both have keyframe diamonds. Perspective sets how strong the depth looks; turn off Show Back to hide the layer while it faces away (card flips). On the canvas, ⌥⌘-drag a selected layer to turn it: sideways turns about Y, up and down about X (hold Shift to snap to 15°); with the diamonds on, the drag records keyframes at the playhead like the inspector does. PNG, video and GIF exports show it; SVG and Lottie exports, and the selection box, stay flat.

3D models

Insert ▸ 3D Model… adds a USDZ file (also drop a .usdz on the canvas) as a model layer: the model is drawn through a camera inside the layer's box, over whatever is behind it. You don't need a model file for devices — right-click an image, video or frame ▸ Add Device Frame ▸ iPhone (3D) / iPad (3D) / Mac (3D) / iPhone Duo (3D) adds a device (the iPhone is a detailed model shipped with the app — an iPhone 18 Pro or iPhone 18 Pro Max in Black, Silver, Glacier or Burgundy, chosen in the inspector; iPhone Duo is the foldable, in Night Sky or Star White; iPad and Mac are simple bodies) and plays that layer on its screen (the layer is listed under the model and drawn only on its screen; a landscape recording turns the phone on its side). Auto-zoom, cursor highlights and captions of a recording show on the screen as they do on the board.

Inspector 3D: Rotation X / Y / Z (pitch, yaw, roll), Offset X / Y / Z (as a fraction of the model's size), Scale, Camera FOV and Camera Distance, Environment (Studio, Daylight, Dusk or none), Light (strength and angle), the iPhone's Model and Finish (iPad and Mac take a Body Colour instead) and the Screen layer. For the iPhone Duo, Fold goes from 0 % (open) to 100 % (folded) and has a keyframe diamond, so two keys open or close it on the timeline; the Screen layer plays on the inner screen and an Outer Screen layer on the cover screen you see when it's folded. On the canvas, ⌥⌘-drag the model to turn it (sideways Y, up and down X, Shift snaps to 15°). Rotation, offset, scale and FOV have keyframe diamonds, so a turntable is two keyframes on Rotation Y (0° and 360°) and a reveal is a few keys on Rotation X, Offset and FOV. PNG, video, GIF and sequence exports render the model each frame; SVG, Lottie, animated SVG and HTML exports draw it as a still and say so.

Motion pieces

The Insert menu (also the toolbar's ＋ menu) inserts ready-made pieces built from ordinary layers and keyframes, so everything in them can be edited, retimed and exported (Lottie included):

Chart… — columns, bars, line, area, pie or donut from rows of label, value (paste from a spreadsheet; more values per row make more series). Bars grow, lines draw and slices sweep in from the playhead, with value labels and a legend. A pie or donut puts its legend beside it or under it, whichever leaves the bigger pie. Select the chart and use Inspector ▸ Chart (kind, values, axis, legend, animation) or Edit Data… to change it — rebuilding replaces the chart's parts, so edits made inside it are lost.
Code… — a code window (dark or light, with a title and window buttons) with syntax colours for Swift, JavaScript, TypeScript, Python, JSON, Kotlin, Go, Rust and shell; Type it out types the code from the playhead.
Cursor — a pointer that glides between points. Move the playhead, move the pointer, and right-click ▸ Add Click at Playhead to press it there with a ripple.
Particles ▸ Confetti, Sparkles, Snow, Bubbles or Burst — the simulation is baked into keyframes for each particle (it doesn't react to later edits; insert again for a new pattern). Each particle gets only a few keyframes — its path is a couple of eased curve segments and its side-to-side sway is a wiggle on Position X — so hundreds of particles stay light in the file and play smoothly. The particles come as one group the size of the selection (or of the frame), so scaling or turning the group — a burst popping in — happens around its middle; particles can fly past its edges. A Burst over a selection flies out to about half the selection's longer side (over the whole frame, half the frame's width), most particles near that edge. Sparkles twinkle in place.
Device frames — right-click an image or video ▸ Add Device Frame ▸ an iPhone or iPad model (or Match Screen Size, which picks the model from the picture's pixel size; the (3D) entries make a turnable 3D device instead — see *3D models*). The picture goes inside a vector bezel with rounded screen corners, and its motion moves to the frame. The same menu also offers a Mac Window (title bar with the traffic lights) and a Browser Window (toolbar with an address field), each light or dark — for app screenshots, recordings and web pages. The chrome is scaled from the picture's pixel size (a Retina screenshot counts as 2×); the title and the address can be edited like any text layer.

Glow and grain

Inspector ▸ Effects also has Glow (a coloured halo around the layer's shape; colour and radius) and Grain (film noise over the layer; amount and size). Both show in the preview and image/video exports.

Importing Lottie animations

Insert ▸ Lottie Animation… (also in the ＋ menu), or drop a Lottie .json onto the canvas: the animation becomes one group of editable layers — shapes (rectangles, ellipses, paths including animated paths, stars, fills, strokes, trim paths), solids, nulls, precomps (groups on their own clock), embedded images and static text — with position, scale, rotation, opacity and anchor keyframes keeping their easing. Gradients become their first colour. Expressions, masks, track mattes, effects, text animators and external images are left out; a sheet lists what was skipped. Comps larger than the artboard are scaled down to fit, and the timeline grows to the animation's length.

Keyframe diamonds in the inspector

With the timeline on, a diamond (◇/◆) appears in front of Position · Size · Rotation · Opacity · Fill · Stroke · Trim (shapes) and Content (text). (Stroke keyframes colour and width together, including the colour's opacity. Content appears for text layers only.)

Motion path on the canvas — select a layer whose position is keyframed (also inside a group): the canvas shows its motion path with an orange dot at each keyframe point and a small dot for every frame (dots close together = slow, far apart = fast). Drag a keyframe point to move that position keyframe (its timing and easing stay). Smooth motion path — with the timeline on, enable Smooth motion path in the Layout section to move between position keyframes along a smooth curve instead of straight lines (automatic bézier). Turn it off to return to linear interpolation.

Drag the white circles (tangent handles) that extend from each keyframe point to shape the curve. Both sides move symmetrically by default; hold Option to move one side only.

Dim ◇ — the property is not animated yet. Clicking adds a keyframe at the current time and starts the animation (a baseline keyframe at 0 s is created too).
Hollow ◇ (accent colour) — animated, but no keyframe at the current time. Clicking adds one with the current value.
Filled ◆ (accent colour) — a keyframe exists at the current time. Clicking deletes it.

Automatic keyframes (recorded as you edit)

With the timeline on, editing a layer that already has keyframes (dragging, resizing or rotating on the canvas, changing inspector values, editing colours or paths…) records the changed property as a keyframe at the current playhead.
Moving several selected objects at once records a keyframe for each of them.
Layers without keyframes are treated as static — editing them creates no keyframes (use Add Keyframe first).
Only properties that already have keyframes get a new one: on a layer that animates its position, changing its opacity changes the opacity everywhere (add an opacity keyframe first to animate it).
The edit applies to the layer as it is shown at the playhead: dragging a moving layer 30 points to the right puts it 30 points right of where it is at that moment. The Mac and iPhone / iPad follow the same rule.

Animatable properties

Position, size (W/H), scale, rotation, opacity
Fill — solid colours interpolate; gradients of the same kind interpolate their stops (colour and position). Different kinds (solid ↔ gradient, linear ↔ radial) cross-fade smoothly.
Path (the anchors and curves of pen shapes) — morphs between the point layouts of each keyframe
Text content — not interpolated: at each keyframe the text switches instantly and holds until the next one (stepped changes for captions and swapped phrases). Text layers only.
- Video, HTML and Lottie exports include it (Lottie writes a new text document at each change; text exported as outlines — gradient text, text on a path — keeps its design text).

Editing keyframes

Keyframes appear as diamonds (◆) on the layer's track.
Click a diamond to jump to its time and select it.
Drag a diamond to change its time.
Select several keyframes — across layers and properties:
- Mac: ⇧-click adds a keyframe to the selection, ⌘-click adds or removes one, and dragging across an empty part of the tracks draws a selection rectangle over any rows (⇧-drag starts one over a span bar too; ⇧ or ⌘ adds to what is selected).
- iPhone and iPad: tap the ✓ (Select Keyframes) button in the timeline bar, or press and hold a keyframe; then each tap adds or removes a keyframe.
- The timeline bar shows how many are selected. Selecting keyframes also selects their layers.
Move them together: drag any selected keyframe — all of them move by the same amount, and nothing goes before 0 s.
Snapping: a dragged keyframe is pulled onto the playhead, markers (beats included), other keyframes and the ends of layer and clip bars when it comes within a few pixels. Hold ⌘ while dragging on the Mac to place it freely.
Stretch or squeeze the timing (Mac): ⌥-drag the first or last selected keyframe — the selection stretches around the other end (⌥⇧-drag: around the playhead). With two or more times selected, a bracket appears along the top of the ruler; drag either end of it to do the same (hold ⌥ to stretch around the playhead). Spacing between keys scales evenly, so the motion keeps its shape, just faster or slower.
Retime menu (timeline bar, with several keyframes selected — Mac and iOS) and the keyframe's right-click menu (Mac): Reverse Keyframes plays the selection backwards in place (each segment's easing is mirrored, so an ease-in becomes an ease-out, and motion path handles follow) and Stretch to 50 / 75 / 150 / 200 %. The right-click menu also has Copy / Paste Keyframes, Paste Values Only, Paste Easing Only, an Easing submenu and Delete Keyframes; a keyframe you right-click outside the selection becomes the selection first.
Distribute Evenly spaces the selected keyframes' times evenly between the first and the last (keys at one time — a pose — stay together); Align to Playhead moves the selection so its first keyframe sits on the playhead. Both are in the Timeline menu, the Retime menu and the keyframe's right-click menu.
Easy Ease (Timeline menu, F9; ⇧F9 eases in only, ⌘⇧F9 out only — also in the Retime menu, the right-click Easing submenu and on iOS the ease button in the timeline bar) makes each selected keyframe arrive and leave at rest with a 33 % influence. Each keyframe's two sides are separate: easing a landing in doesn't change how the next move starts. Fine-tune them in the graph editor.
Every one of these is one undo step, named after what it did ("Move 12 Keyframes", "Reverse 6 Keyframes").
Move a layer's whole animation: drag the ⟷ grip at the right end of the row's name. All of that layer's keyframes, its appear/disappear window, its motion path tangents and (for a clip) its placement move together, live, as one undo step. If the layer is part of the selection, every selected layer moves with it — push a whole scene back by a second, or re-space entrances. Nothing can be dragged before 0 s.
The banner at the top of the inspector always says which keyframe you are editing (Baseline / Keyframe n / m). Changing properties in that state updates that keyframe's values.
Press Delete with keyframes selected to remove them (same as the trash button in the timeline bar). Clicking the canvas clears the keyframe selection so Delete applies to layers again.
Deleting a layer removes its keyframes too — for a group, the keyframes of everything inside it; Undo brings them back.
Copy Keyframe (timeline bar, Timeline menu, right-click, or Edit ▸ Copy while keyframes are selected) copies the selected keyframes — any number, across layers and properties — with their values and easing, keeping their timing relative to the first one. Paste Keyframe (or Edit ▸ Paste after copying keyframes) puts them on the selected layers starting at the playhead:
- Keyframes copied from one layer go onto every selected layer. Copied from several layers, they pair up with the selected layers by the same layer (pasting back into the same document), then by name, then in order.
- Paste Values Only keeps the easing already there (linear for new keys); Paste Easing Only changes just the easing of keyframes that already sit at those times.
- The keyframes go on the system clipboard, so they paste into another document, and between the Mac and iPhone / iPad with Universal Clipboard. The timeline grows if the pasted keys run past its end.
- Properties a target layer can't animate (text size on a shape, say) are skipped. The pasted keyframes become the selection.
A layer's appear/disappear span bar is tinted with its fill colour, and a colour swatch sits next to its name, so you can tell tracks apart at a glance (grey when there is no fill). Changing the fill updates it immediately.
Video tracks are taller and show frame thumbnails in time order inside the clip bar (updated as you trim, move or zoom). Audio tracks show a waveform icon; both draw fade regions (dark wedges) and a mute marker on the bar. During playback, video and audio clips play with their volume and fades applied.
Selecting a keyframe shows an Easing button in the timeline bar. It opens the easing editor:
- Presets: Linear · In · Out · In·Out · Hold, and four springs — Gentle, Bouncy, Snappy, Elastic (a loose wobble).
- More ▾: Smooth (After Effects' Easy Ease) and the classic curve families — Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back — each as In, Out and In-Out. Back dips below the start (In) or overshoots the end (Out) for anticipation and overshoot. They are ordinary curves, so they look the same in every export.
- Curve graph: drag the two control points to draw a custom cubic bézier (values beyond 1 give overshoot).
- Spring: with a spring chosen, Stiffness (how hard it pulls), Damping (how quickly it settles) and Mass (how heavy it feels) sliders replace the graph, with the response drawn above them; the motion uses real spring physics, so it can overshoot and bounce. Width, height and stroke weight stop at 0 instead of swinging below it (a bar growing from nothing never turns inside out) — in the editor and in every export.
- Easing applies to the segment from this keyframe to the next (to its right). With ⋯ menu ▸ Show Easing Curves on, each keyframe's segment shows its easing curve (off by default).

Graph editor

Graph Editor (the chart button in the timeline bar, or Timeline ▸ Graph Editor) shows the curves of the selected keyframes' properties in place of the tracks — or, with no keyframes selected, of the selected layers' animated number properties. On iPhone and iPad it opens as a sheet.
Value shows the value over time; Speed shows how fast it changes (units per second) — an ease is a speed that falls to zero at the keyframe. Each curve is scaled to its own range, in its own colour; the legend on the left names them.
Click a keyframe (square) to select it (⇧ adds, ⌘ adds or removes, as on the tracks). Drag it sideways to move it in time and — in Value — up or down to change its value (⇧ keeps the drag to one direction). Several selected keyframes move together.
A selected keyframe shows its handles: the left one shapes how the value arrives (ease in), the right one how it leaves (ease out). Drag sideways for influence (how far into the segment the ease reaches) and up or down for speed (in Speed, the speed at the keyframe; in Value, the curve's control point). Dragging a handle sets that side on every selected keyframe alike, leaving the other side as it was.
The handles are ordinary easing curves, so video, HTML and Lottie play them exactly (Lottie keeps both sides per key). A spring or a hold has no handles.

Split, slip and ripple delete

Split Layers at Playhead (Timeline menu, ⌘⇧D, or the timeline's ⋯ menu) cuts every selected layer whose bar crosses the playhead — shapes, text and groups as well as video and sound clips. The original ends at the cut and a copy ("Name (2)") starts there; the keyframes are shared out with a keyframe at the cut on both sides, so nothing jumps. A group's copy carries its layers' whole animation.
Slip (Mac): ⌥-drag the middle of a bar to slide what's inside while the bar stays: a clip shows earlier or later footage; a layer's keyframes (and a group's clock) move in time.
Ripple Delete deletes the selected layers and closes the gap they leave: everything whose bar starts after the deleted bar moves earlier by its length, keyframes and markers included.

Interactive states (web pages)

Timeline ▸ States… (iOS: timeline ⋯ ▸ States…) turns a piece into an interactive web page: a state is a named stretch of the timeline (from … to …, seconds — end before start plays it backwards, Set ▸ Between Markers takes the stretch around the playhead) and the actions that play it: Click, Pointer Enters, Pointer Leaves, Scrolls into View or Page Opens, on one layer or the whole piece.
In the HTML export the page then waits at its first frame and plays a state when the viewer acts. Two click states on the same layer toggle (open / close). A state that starts while the animation is inside its stretch carries on from there, so a "pointer leaves" state running backwards smoothly undoes a half-played hover. Loop repeats a state while it's the current one.
▶ in the sheet, or ⋯ ▸ Play State, previews a state on the canvas.
States are for web pages only: video, GIF and Lottie play the whole timeline (Lottie's export lists this).

Per-property tracks (sub-tracks)

The disclosure arrow (▸/▾) left of a track name expands the layer's per-property sub-tracks (Position X/Y · Scale · Rotation · Opacity · Fill · Path …).
Keyframes on the layer row are selected, moved and deleted as poses (every property at that time).
Keyframes on a sub-track affect that property only, so timing can be adjusted per property.
A property that moves on its own (Motion Behaviors) is marked ∿ (oscillator) or ↗︎ (link) — it has a row even without keyframes.

Track ↔ canvas selection

Selecting a shape on the canvas highlights its track.
Clicking a track row (its name) selects the shape on the canvas.

Layer appear / disappear (visibility span)

With the timeline on, selecting a layer shows a Timeline section in the inspector.
Appear At / Disappear At set when the layer starts and stops being visible on the timeline. Outside that span it is not drawn.
Keyframes follow layer start (on by default, shown when the layer has keyframes): changing Appear At — in the inspector, or by dragging the span bar — moves the layer's keyframes by the same amount, so an animation built to start when the layer appears keeps its shape wherever you place it. Turn it off when the keyframes should stay where they are (for example when you set Appear At to the moment a fade-in already starts). Disappear At never moves keyframes. The row's ⟷ grip moves everything regardless of this switch.
Timeline span bar: the span can also be edited on the track — drag the middle to move the whole span, drag the ends (handles) to change the appear and disappear times.
- The bar appears for layers that already have a track (layers with keyframes) and for layers with an appear/disappear time. For a static layer, set Appear/Disappear At once in the inspector and its row and bar appear.
(Video layers use clip trimming and placement instead.)

Animating layers inside groups

In the timeline, layers inside a group are listed under the group's row, indented, in the Layers panel's order. The ▾ / ▸ triangle on a group row shows or hides them.
The timeline follows the selection: when you select an animated layer (on the canvas, in the Layers panel, from a menu), its row scrolls into view — twirled groups above it open — so its keyframes are right there. Layers without keyframes have no row and leave the timeline where it is.
Children of a group can be keyframed independently. Double-click the group to select a child, then add keyframes; that child moves on its own (separately from the group).
Animated layers can be grouped. Group (⌘G) — or dragging a layer into a group in the layer panel — moves their position keyframes into the group's space, so everything keeps playing exactly where it did; a turned or scaled group also gets the layer's rotation and scale keys adjusted. Ungroup does the reverse (children of a turned or scaled group keep its turn and size), and also carries over what the group did to its children: its opacity (opacity keyframes are scaled), its appear / disappear times, and its own timing (keyframes move to the times they actually played; a looping group keeps only its first pass). Keyframes on the group itself (moving or fading the whole group) are removed with it on Ungroup.

Finished animations can be exported as MP4 / MOV video. See Export.