The timeline sits under the canvas and shows when each layer appears, moves and leaves. Every layer gets its own row. In this guide you'll learn to read the timeline, change timing by dragging, and scrub through your animation frame by frame.
The timeline at a glance
# | Part | What it does |
1 | Layers list | One row per layer, in stacking order. The eye icon hides or shows a layer. |
2 | Show current frame | Shows the design exactly as it looks at the playhead's position. |
3 | Reset play position | Sends the playhead back to the start. |
4 | Play | Plays the animation of the current slide. |
5 | Ruler | Time in seconds. Click it to move the playhead. |
6 | Playhead | Marks the moment you're looking at. |
7 | Fallback image marker | Sets which frame is used as the static fallback image for HTML. |
8 | Layer bar | When the layer's animation starts and ends. |
Tip: if the timeline feels cramped, drag the small handle (···) on the border between the canvas and the timeline upwards to make it taller.
Read a layer bar
Each bar is split into three zones:
Build in (left): how the layer enters.
Middle: the time the layer stays on screen. You can add a middle animation here, such as a pulse or shake.
Build out (right): how the layer leaves.
The label on a zone shows the effect, for example Alpha. (C) after the name means the preset's settings were customised, for example by Magic Animator. Click a zone to open its settings (see 04 · Add build-in, middle, and build-out animations).
The timeline is as long as the slide. In this example the slide lasts 5 seconds, so the bars end at 5 s. To change the slide length, see 06 · Add slide transitions and control looping.
Change when a layer appears
Point at the middle of a layer bar.
Drag the bar left to make the layer appear earlier, or right to make it appear later.
Release. The whole animation (build in, middle and build out) moves together.
While you drag, a dashed guide line appears when the bar lines up with another layer, so it's easy to make layers start at the same time.
Make an animation faster or slower
Point at the edge between two zones until the cursor turns into a double arrow (↔).
Drag left or right. The new length is shown on the bar while you drag, for example 1.6 s.
Release.
A shorter build-in zone means a faster entrance. A longer one means a slower entrance. The same works for the build-out zone and for the ends of the bar.
Tip: made a mistake? Press Ctrl+Z (Windows) or Cmd+Z (Mac), or click Undo in the toolbar.
Hide a layer while you work
Hover the layer in the Layers list.
Click the eye icon (tooltip: Hide layer). The row turns grey and the layer disappears from the canvas.
Click the eye again to show it.
Hovering a row also shows a lock icon next to the eye. Use it to lock the layer so you don't move it by accident.
Play and scrub through the animation
Play it:
Click Play (4) next to Layers to play the current slide.
The Play button in the toolbar above the canvas does the same. Its dropdown also has Play all slides.
Click Reset play position (3) to go back to 0 s.
Scrub it frame by frame:
Turn on Show current frame (2). A Preview mode badge appears under the canvas with the current time.
Click anywhere on the ruler. The canvas shows the design exactly as it looks at that moment.
Click further along to step through the animation.
This is the best way to check that layers don't overlap awkwardly or appear too late. To leave this mode, click the toggle again or the × on the Preview mode badge.
Choose the fallback image
Some ad platforms and older browsers show a static image instead of the animation. You choose which frame is used.
Turn on Show current frame.
Hover the marker above the ruler. The tooltip reads Drag to set the fallback image used for the HTML.
Drag the marker to the frame you want, usually a moment where every layer is fully visible.
The canvas shows the selected frame, so you can see exactly what the fallback will look like. More on fallbacks in 08 · Preview and export animated designs.
Timelines in a design set
In a design set, every size has its own timeline, so you can fine-tune timing for each format.
Double-click a size, or hover it and click the pencil icon. This opens edit mode for that size.
Click Timeline to open its timeline.
Use the size dropdown or the arrows to switch to another size. Its timeline opens instead.
Press Esc to go back to the overview of all sizes.
Want one layer to animate the same way in every size? Use Lock Transition in the Layers tab. Locking applies to all sizes. See 07 · Copy and reuse animations.
Next steps
04 · Add build-in, middle, and build-out animations – choose and adjust the effect for each zone.
05 · Create custom animations – build your own moves step by step.
08 · Preview and export animated designs – check the final result before exporting.
Ready to start designing?
👉 Sign up for a free Bannersnack account – it only takes a minute.
👉 Already have an account? Log in here to continue where you left off.