Timeline
Control layer timing, scene duration, animation, keyframes, easing, and work area review in Studio
The Studio timeline controls what happens inside the selected scene, frame by frame. Use it to review the current frame, align layers, change when layers appear, adjust scene duration, add animation, edit keyframes, tune easing, and focus on the layers that matter during review.
Flow Map decides which scene or lineup plays next. Timeline decides how the selected scene is built over time.
What the Timeline Controls
Frame ruler and playhead
Move to an exact moment in the scene and inspect the canvas at that frame.
Layer rows
Select layers, inspect layer hierarchy, expand precomps, rename layers, open connected connector indicators, and add timeline animation.
Layer bars
Move layers earlier or later, trim layer start and end frames, and compare which layers overlap.
Scene trim bar
Shorten or extend the selected scene duration from the timeline.
Keyframe rows
Show animated properties, add keyframes, edit values, move keyframes, and delete keyframes.
Easing segments
Change interpolation between keyframes with presets, hold timing, or a custom bezier curve.
Timeline filters
Show only animated layers, hide layers outside the work area, and show or hide keyframe rows.
Timeline edits affect the selected scene. To change the order in which viewers move between scenes, use the project flow tools instead of the timeline.
Timeline Layout
The timeline is split into a layer column on the left and a tracks area on the right.
Header Controls
The timeline header contains review and navigation controls:
Collapse or expand
Hides or reveals the full timeline panel.
Frame indicator
Shows the current frame so timing work can be discussed precisely.
Mute all sounds
Temporarily mutes or unmutes audio while reviewing timing.
Show or hide keyframes
Expands or collapses animated property rows across the timeline.
Clip to workarea
Shows only layers that overlap the active scene work area.
Show only animated layers
Filters the layer list to layers that contain keyframes.
Zoom out, zoom in, and Fit
Changes the horizontal scale of the timeline and fits the active work area into view.
You can also resize the full timeline panel vertically and resize the layer-label column when layer names are long.
Layer Column
The layer column lists the scene's layers in stack order. It shows layer type icons, layer names, nested precomp rows, connector indicators, keyframe toggles, drag handles, and the add-animation control.
Use the layer column to:
Select a layer and sync the canvas selection to it.
Expand a precomp to reveal nested layers.
Drag layers to change visual stack order.
Drag a layer into a precomp when the precomp can accept nested layers.
Double-click a layer name to rename it.
Open a connector badge when a layer is connected to dynamic behavior.
Open the Add Animation menu for supported layer types.
Tracks Area
The tracks area is the frame-based editing surface. It contains the ruler, playhead, scene trim bar, layer bars, animated property rows, keyframe markers, and easing segments.
Use the tracks area to:
Click or drag the playhead to inspect another frame.
Drag a layer bar to move a layer earlier or later.
Drag a layer edge to change its in or out point.
Drag the scene trim handle to shorten or extend the scene.
Select, add, move, and edit keyframes.
Drag or click easing segments between keyframes.
Review a Scene on the Timeline
Select and Organize Layers
Click a layer row or layer bar to select it. Use multi-select when several layers need the same timing change.
Selection tools:
Click a layer
Selects that layer and clears keyframe selection.
Shift-click
Adds the layer to the current selection.
Cmd-click or Ctrl-click
Toggles the layer in or out of the current selection.
Drag across the layer column
Marquee-selects multiple layer rows.
Right-click a layer
Opens the available layer actions for that layer or selection.
When a selected layer is outside the current playhead frame, Studio moves the playhead near the layer's visible range so the selected layer can be inspected on the canvas.
Reorder Layers
Drag the layer handle to change layer stack order. Drop indicators show whether the layer will be placed before another layer, after another layer, or inside an eligible precomp.
Layer order affects visual stacking. A layer higher or lower in the stack can appear in front of or behind other layers when their layer bars overlap in time.
Reordering layers can change the visual result even when the layer timing does not change. Review overlapping frames after changing stack order.
Work With Precomps
Precomp rows can be expanded to reveal nested layers. Expanding a precomp helps you inspect animation that lives inside the nested composition instead of only seeing the parent precomp bar.
Use precomp expansion when:
A selected layer is nested and not immediately visible in the main layer list.
Animation exists inside a precomp.
You need to move a layer into or around a precomp.
A connector indicator points to a nested layer.
Change Layer Timing
Layer bars show when each layer is active in the scene.
Drag the whole bar
The layer should start and end earlier or later while keeping the same duration.
Drag the left edge
The layer should begin at a different frame.
Drag the right edge
The layer should end at a different frame.
Select multiple layers and drag
Several layers should move or trim together.
During a drag, Studio shows the preview position before applying the timing change. If a layer extends outside the active work area, the out-of-bounds part is visually separated so you can see what is outside the current scene range.
Common timing fixes:
Move a text layer so it appears after the background animation settles.
Extend a CTA button so it stays visible until the scene ends.
Trim a decorative layer that continues after the useful scene content.
Move a group of related layers together to preserve their internal timing.
Align a layer's start frame with the first keyframe of its animation.
Adjust Scene Duration
The scene trim bar sits above the layer tracks. Drag its right handle to shorten or extend the scene duration.
Use scene duration edits when:
The scene ends too early and cuts off an animation.
The scene has unused time after all meaningful layers are gone.
A branch or interaction needs more time before the next scene begins.
Imported After Effects timing needs cleanup for the final MP5 experience.
When the scene is shortened, the trimmed region is shown outside the active work area. When the scene is extended, the timeline shows the added duration so layers can be extended or new animation can be added into that space.
Shortening a scene does not automatically retime every layer. Check layers and keyframes near the new end frame before saving.
Add Animation
Hover over a supported layer and select Add Animation to create timeline animation. Studio adds the relevant animated property rows and keyframes, then expands the layer so the new animation can be reviewed.
Some layer types, such as audio and video layers, do not expose the timeline add-animation menu.
Animation Types
Transform
Position, Scale, Rotation, Opacity
Movement, entrance and exit motion, fades, zooms, and rotation effects.
Layer styles
Blur, Hue, Saturation, Brightness, Fill Color, Fill Opacity, Stroke Color, Stroke Width, Stroke Opacity
Visual styling changes on shape, solid, and supported styled layers.
Text styles
Fill and stroke hue, saturation, brightness, color, opacity, and stroke width
Animated text color and stroke styling.
Motion presets
Slide directions and other preset motion effects
Fast entrance, exit, or combined motion without building every keyframe manually.
Character animation
Text animation presets for text layers
Per-character text reveal, exit, or combined text motion.
In, Out, and Both
Many animation presets offer phase choices:
In
Adds an entrance animation near the layer start.
Out
Adds an exit animation near the layer end.
Both
Adds entrance and exit timing in the same layer.
Use In for layers that should appear with motion, Out for layers that should leave with motion, and Both when the layer should animate in and animate out.
Transform Animation
Transform animation changes the layer's position, scale, rotation, or opacity over time.
Use transform animation for:
Fading a layer in or out with opacity.
Moving a layer into frame with position.
Scaling a layer up for emphasis.
Rotating a graphic or icon.
After adding a transform animation, expand the layer's keyframes and adjust the generated keyframes if the default timing needs refinement.
Style Animation
Style animation changes the visual appearance of a layer over time. The available style options depend on the selected layer's properties.
Use style animation for:
Softening a layer with blur.
Shifting a shape or text color.
Animating fill or stroke opacity.
Emphasizing a graphic by changing brightness or saturation.
Text and Character Animation
Text layers can use text style animation and character animation presets.
Use text style animation when the text itself stays in place but the style changes. Use character animation when the text should reveal, exit, or move by character.
Character animation is useful for:
Intro text reveals.
Headline emphasis.
Outro text exits.
Motion that should feel tied to the letters rather than to the entire layer box.
Work With Keyframes
Keyframes define the values of an animated property at specific frames. The timeline shows keyframes as markers on animated property rows.
Show Keyframe Rows
Use the global keyframe control in the header to show or hide keyframes across the timeline. Use a layer's keyframe toggle to show or hide only that layer's animated property rows.
When keyframes are visible, each animated property appears as its own row, such as Position, Scale, Opacity, Fill Color, or a text animation property.
Add a Keyframe
Move the playhead to the frame where the new value should be set, then use the plus control on the property row.
Studio creates the new keyframe at the current playhead position. If the property has surrounding keyframes, the editor starts from the interpolated value at that frame so the new keyframe does not unexpectedly jump.
Edit a Keyframe Value
Click a keyframe marker to open its value editor.
Depending on the property, the editor may show:
Numeric fields
Position, scale, rotation, opacity, stroke width, and other numeric values.
Color picker
Fill color, stroke color, and supported color values.
JSON field
Complex values that cannot be represented as simple numeric or color fields.
For scale keyframes, use Lock proportions when X and Y should change together.
Move Keyframes
Drag a keyframe marker to retime it. Use Shift-click, Cmd-click, Ctrl-click, or marquee selection to select multiple keyframes, then drag one selected keyframe to move the selected group.
Studio keeps keyframes constrained so they do not cross neighboring keyframes in the same property group.
Delete Keyframes
Open the keyframe editor and select Delete to remove a keyframe. After deleting, preview the surrounding frames because the property will interpolate between the remaining keyframes.
Tune Easing
The segment between two keyframes controls how the value changes from the first keyframe to the next. The segment label shows the current easing style.
Click a segment to open the easing editor. Drag a segment to move the segment's keyframes in time.
Available easing modes:
Linear
Changes at a constant rate.
Ease In
Starts slowly and accelerates.
Ease Out
Starts quickly and slows down near the next keyframe.
Ease In Out
Smooths both the start and the end of the change.
Hold
Keeps the value unchanged until the next keyframe.
Custom
Uses a custom bezier curve from the easing graph.
Use easing to make motion feel intentional. For example, a CTA that slides into place usually feels better with Ease Out than with Linear, while a value that should switch instantly should use Hold.
Focus the Timeline During Review
Dense scenes can contain many layers and keyframes. Use timeline filters to focus the view before changing anything.
Show only animated layers
Find which layers have keyframes without scanning every static layer.
Clip to workarea
Hide layers that do not overlap the active scene duration.
Show or hide keyframes
Reduce visual noise when you only need layer timing.
Expand precomps
Inspect nested timing and nested keyframes.
Zoom controls
Switch between full-scene review and detailed frame work.
Mute all sounds
Review visual timing without audio distraction.
Timeline Review Checklist
Before saving a scene with timeline changes, check:
The scene duration ends after the final required visual, audio, or interaction moment.
Important layers are visible for long enough to be read or clicked.
Layer bars that should appear together overlap on the timeline.
Layer stack order still matches the intended visual hierarchy.
Generated animations start and end at useful frames.
Keyframes do not create unwanted jumps.
Easing matches the desired motion feel.
Text and CTA layers still work with realistic dynamic data values.
Connector badges still point to the intended layers after renaming or reordering.
The draft preview plays correctly before publishing.
Last updated