The Timeline appears at the bottom of the editor when you select an artboard and open up the Animate tab. It’s used to control when and how animations play.
Each animation or group is represented as a segment on the timeline, which gives you a clear view of how different operations are arranged and work together.
Arrange sequences
When you add an animation, it starts where the time cursor is placed. Move and sequence animations by arranging your segments on the timeline:
Click the animation segment to select it
Drag it left or right to adjust when the animation starts or ends
Use this technique to sequence animations, delay elements, or create staggered motion between layers.
💡 Tip: Use the ← and → keyboard shortcuts to finely adjust an animation's timeline position by the millisecond
Stagger animations
Use stagger to create cascade effects in your design:
Select the animations you want to stagger from the timeline with ⌘ or Ctrl Click
Right-click to open the context menu and select Stagger
Set your Delay time in seconds
This sets a uniform duration of time between the start of each animation in your selection.
Adjust duration
To fine tune the duration of an animation:
Hover over the start or end edge of the animation segment
Drag the edge to shorten or extend the animation
You can also select multiple animations and adjust their duration proportionally.
The animation will automatically adjust to the set duration. Extending durations makes motion appear slower, shortening durations makes motion appear faster.
You can also input your duration time manually from the Animate tab.
Adjust scene duration
The scene duration determines the final length of your export.
Modify the scene duration by dragging the duration marker in the timeline, represented by the edge of the grey area at the end of the timeline.
Alternatively, select the artboard and open the Animate tab to define its duration in seconds.
Animations that occur outside the scene duration will not be included in your export.
Group animations
Animations groups help you keep your timeline clean and organized. It's key to keeping your sanity when working on complex sequences.
To fine tune the duration of an animation:
Select the animations you want to group in the timeline
Right-click to open the context menu and select Group, or use ⌘ or Ctrl G
💡 Tip: Consider using AI Superagents to assist with cleaning up your timeline in one click ✨
Zoom in and out
Adjust the zoom level on the timeline with trackpad gestures, or use Ctrl or ⌘ and scroll over the timeline.