Animation Beta

Transitions animate between scenes; animation happens inside one. Every scene carries its own clock, and every object in it can ride that clock. Switch the editor to Animation mode, move the playhead to a moment, change something — SSHOW records that value at that moment as a keyframe and fills in everything in between. Because all the objects share one clock, a whole scene moves in step: a title slides in, a chart grows, a caption waits for your click.

Note Animation and transitions are complementary. A transition carries the eye from one scene to the next; the timeline choreographs what happens within a scene. Most stories use both.

Design and Animation

The editor header holds two modes. They share the same canvas, tools, and panels — what changes is whether an edit changes your design or the animation on top of it.

Design

Normal editing. The canvas shows your design as designed and every edit changes the object itself. Any animation you've authored stays untouched in the background.

Animation

The Objects panel becomes a timeline, a key badge appears beside every animatable property, and the canvas shows the scene as it looks at the playhead. Edits here are recorded at that moment in time.

Tip Tab switches modes whenever you're not typing (Shift+Tab steps back). The editor remembers the mode you were in and reopens there.

The timeline

In Animation mode the Objects panel grows a ruler and a lane for every object. The header is the transport and the clock's settings; the body is where keyframes live.

The header

Clock

Which clock you're editing. It reads Scene for the scene's own timeline, and becomes a breadcrumb (Scene ▸ Card) once you step inside a frame. Click a segment to go back up.

Transport

Jump to start, play / pause, jump to end, and loop — plus the work-area toggle and the add-stop button, each covered in its own section below. Preview runs the real clock, so what you see is what your audience will see.

Auto-keyframe

The key-shaped toggle. On (the default) records every edit at the playhead as a keyframe — see the section below.

Add key

The key with a plus, beside the auto-keyframe toggle. Where auto-keyframe waits for an edit, this one keys the selection right now: every track the layer already animates gets a key at the playhead holding its current value. A layer that animates nothing yet is started with position, rotation, scale, and opacity. One undo covers the whole selection.

Graph view

Swaps the key lanes for a value-over-time plot, so you edit the curve itself rather than the two keys at its ends. It has a section of its own below.

Playhead time

The current time, in milliseconds or frames depending on the ruler unit. Type a value to land on it exactly.

Duration

How long the clock runs, in milliseconds. Shortening it never deletes keys past the end — lengthen it again and they're all still there.

Frame rate

The frame grid the playhead and keys snap to. Set it low (8–12 fps) for a deliberate, stop-motion feel; leave it high for smooth motion.

Ruler unit

Switches the ruler, the time field, and every readout between seconds and frames.

Zoom

How much time fits on screen. Double-click the slider — or press F — to fit the whole clock; Alt / ⌘ + scroll zooms around the pointer.

The body

Ruler

The time scale. Press or drag anywhere along it to scrub, and stop markers ride on it.

Object row

One row per object, with a bar spanning its first to last keyframe and a round marker at every time it moves. Dragging a round marker retimes every property key at that moment together.

Property rows

Expand an object with the arrow beside its name to get one row per animated property — Position X, Opacity, Fill 1 … — each with its own diamond keys.

Playhead

The line marking the current time. The canvas always shows the scene exactly as it looks at this moment.

Your first animation

Fading an object in takes about a minute.

1. 1

   Design the object the way it should end up, then switch to Animation.

2. 2

   Put the playhead at 0 and set the object's opacity to 0 in the inspector.

3. 3

   Move the playhead to 0.5s and set opacity back to 100.

4. 4

   Press Space, or the play button, and watch it fade in.

5. 5

   Not quite right? Drag the second diamond along its row to retime it, or double-click it to open the Motion panel and change the curve.

Tip Notice you never had to "add a keyframe". With auto-keyframe on, changing something while the playhead sits at a time is the keyframe — position, rotation, size, colour, anything you touch.

Auto-keyframe

The key toggle in the timeline header decides what an edit in Animation mode means. It's on by default.

On

Every change lands as a keyframe at the playhead — dragging on the canvas, typing in a panel, nudging with the arrow keys. Only the properties you actually changed are recorded.

Off

Editing a property that isn't animated yet changes the design itself, exactly like Design mode — so you can fix a layout mid-session without littering the timeline. Properties that already carry keys still key at the playhead, so motion you've authored is never silently overwritten.

Note The first key on a property also drops one at time 0 holding the value you designed, so frame 0 is always your design. That's why nothing jumps when you leave Animation mode.

Working with keyframes

Keys are diamonds on a property row and circles on the object row. Everything you can do with them:

Tip Right-clicking a key opens the same operations as a menu, including Jump to Previous / Next Key — handy when keys sit close together at a low zoom.

What you can animate

Anything with a key badge beside it can carry a track. The property rows in the timeline use the same names as the inspector.

Position, rotation (X · Y · Z), depth, perspective, scale, skew, anchor

The whole transform, one axis at a time — slide something in on X while it settles its rotation, or spin it around a moved anchor point. The 3D fields — Rotation X/Y, Depth, Perspective — are tracks too, so a card can flip in space over time.

Width and height

The object's real geometry, not a scale trick, so strokes, corner radii, and text layout stay correct as it grows.

Opacity

Fades in and out. The most common track there is, and the cheapest to play.

Fills, strokes, and effects

Each paint or effect keys as its own item — Fill 1, Stroke 1, Effect 1 — so a colour can shift while a shadow stays put. Gradients interpolate stop by stop.

Corner radius

Each corner keys independently, plus the inner radius on stars and rings — enough to round a square into a pill and back.

Text content

The words themselves. Text swaps at the key instead of blending, which is exactly what a 3 · 2 · 1 countdown or a changing label wants.

Path shape

A path's points key as a whole, so one shape morphs into another with its curves intact. Both keys need matching points — start from the same path and move its vertices rather than adding or removing them.

Scene background

The scene's own fills and effects animate on the same clock, so the backdrop can shift with the content in front of it.

Note A group's size is decided by its children, so a group has no width or height track — animate the children, or use a frame, whose box is fixed.

Between two keyframes

Each key shapes the segment that follows it. Pick the kind of in-between you want:

Double-click a key to open the Motion panel on it. It's the same editor transitions use — drag the two bezier handles, dial a spring, or pick a named preset from the Templates tab — so a feel you tuned once works everywhere.

Tip The segment's length comes from the gap between the two keys, so an easing curve here has no duration of its own. Retime by dragging the keys.

Graph view

Lanes tell you when something happens; the graph tells you how. Toggle it from the button in its own group in the timeline header, and the key rows become a plot of value against time — the shape of the motion, drawn. It reads the same clock and playhead as the lanes, so switching back and forth never moves anything.

Axes

Time runs left to right on the same ruler the lanes use. Value runs bottom to top, labelled in the track's own unit — px for position, depth, perspective, and size, ° for rotation and skew, plain numbers for scale and opacity.

One curve in focus

Only the focused track is editable. It draws solid with its keys on it, while the selection's other tracks sit behind as pale context so you can see how they line up. Click a context curve — or its row in the side rail — to focus that one instead.

Edit the value

Drag a key up or down to change what it holds. The numeric fields above the rail arm as soon as a key is selected, so you can type an exact value instead.

Retime

Drag a key left or right to move it in time. It stays between its neighbours, so a drag can never reorder the track.

Tangent handles

A selected key shows a handle on each side — the incoming and outgoing ease. Dragging one moves both so the curve stays smooth; hold Alt to break the pair and move just that side, or Shift to lock the drag to one axis.

Insert on the curve

Double-click anywhere on the focused curve to drop a key there, taking the value the curve already has at that point — so the shape doesn't change until you move it.

Tracks that aren't numbers

Fills, text, and path points have no value axis to plot. They run as strips under the plot instead — a colour ribbon for paint, and keys you can select and retime like any other. Focus one and the plot shows its progress through the change.

Note Right-click a key in the plot for the same menu the lanes give you — tween type, copy, delete — and double-click it to open the Motion panel on that segment.

Stops — waiting for a click

A presentation isn't one long take. A stop is a point where the clock pauses and waits for you, the same beat PowerPoint spends a click on.

1. 1

   Put the playhead where the pause belongs and press the flag button in the transport.

2. 2

   Drag the flag marker along the ruler to retime it (Shift snaps it to nearby keys).

3. 3

   Right-click a flag to move the playhead onto it, or to delete it.

In Play mode a scene starts its clock the moment you arrive and runs to the first stop. Each click plays on to the next stop; once they're used up, the next click moves to the following scene. Clicking mid-run skips straight to the end of that segment, so the animation never holds up a presenter who's in a hurry.

Tip Going backward lands on the finished state rather than replaying the scene — the screen you just showed, exactly as you left it.

Work area

The bar under the ruler marks the slice of the clock a presentation actually plays. Trim it to rehearse one passage, or to present just that range of a longer clock — everything outside it stays authored, just unplayed.

Drag a handle

Resize the range from either end. Hold Shift to snap onto keyframes, stops and the playhead — the same smart snap the keys themselves use.

Drag the span

Slide the whole range along the clock with its length kept. With Shift, whichever edge passes closer to a snap target seats on it.

B · N

Pin the range's start (B) or end (N) to the playhead — After Effects' work-area keys.

Double-click the span

Reset to the full clock. The work area is a property of the clock, so every change is a single undo step.

Play work area only (W)

The bracket toggle in the transport (or W) makes the editor's play rehearse the trimmed range: play enters at its start, completes at its end, and the loop restarts inside it.

Note Presentation is where the work area really acts: play and view modes enter a scene at the range start, park on stops inside it, and move on at the range end. The editor ignores it unless the toggle is on — authoring previews the whole clock.

Frame timelines

A frame can own a clock of its own, so a card, a chart, or a widget carries its animation with it instead of leaving it scattered across the scene's timeline.

• Double-click into a frame on the canvas. The clock breadcrumb switches to Scene ▸ Frame and the timeline now edits that frame's clock.
• Rows for objects outside the frame dim, so it's always obvious which clock you're authoring.
• Press Esc to step back up one level, or click a breadcrumb segment to jump straight there.

Note The scene's clock is the one presentations play. A frame's own clock is authored the same way and is ready for interaction triggers — click and hover — which are on the way.

Playing it back

The same clock drives every surface, so the video matches the presentation.

In the editor

Space plays and pauses; the loop button repeats the clock while you tune. Playback never changes your document — scrub as much as you like.

Play mode

Presenting runs each scene's clock on arrival and honours its stops, with the clicker keys, arrows, and remotes you already use.

Video export

Each scene renders for the span it presents — its work area when one is set, otherwise its whole clock — baked frame by frame. Scenes with no clock hold for the fixed duration you set.

Lottie export

The active scene's animation can leave as a Lottie JSON of vector keyframes, ready for the web or an app. Text, media, dynamic paints, and effects are dropped.

Keyboard

Animation mode's keys work wherever the focus is, so you can keep both hands on the work.

Good to know

A few guarantees worth knowing before you build something long.

• Playing, scrubbing, and previewing never change your document. Saving mid-animation stores your design, not the frame you happened to be on.
• Undo only steps back through edits — the keys you made and the values you changed — never through playback position.
• Leaving Animation mode returns the canvas to your design. Nothing is lost; the clock is simply parked.
• Keep it light for smooth playback: a handful of animated objects per scene, a few keys per property, and one curve family reads better than everything moving at once.