Skip to main content

1. Where to find the animation tools

A quick tour of every animation control in single designs and design sets, so you know where to start.

This guide introduces Bannersnack’s animation features: Magic Animator, the Timeline, animation panels for individual layers, and slide transitions. Learn where to find them, what each one does, and when to use it.

The animation tools at a glance

The Bannersnack editor with the animation tools numbered 1 to 8

  1. Animator (left toolbar) opens Magic Animator, which animates every layer in one click.

  2. Layers in the Timeline. Each row is one layer of the current slide.

  3. Layer bar. Displays the animations for each layer.

  4. Timeline controls: Show current frame, Reset play position and Play.

  5. Play in the top toolbar previews the current slide. The arrow next to it has Play all slides.

  6. Slide transition between two slides. Click it to choose how one slide hands over to the next.

  7. Loop count sets how many times the whole design plays.

  8. Timeline button. Click it to open or close the Timeline.

Which tool should I start with?

I want to…

Use

Guide

Animate the whole design quickly

Magic Animator

02 · Animate your design with Magic Animator

Change when layers appear and disappear

Timeline

03 · Use the animation timeline

Choose how one layer enters, moves or exits

Animation panels

04 · Add build-in, middle, and build-out animations

Design my own movement, step by step

Custom animations

05 · Create custom animations

Animate between slides or control looping

Slides panel

06 · Add slide transitions and control looping

Reuse an animation on other layers or sizes

Copy and paste

07 · Copy and reuse animations

New to animation? Start with Magic Animator, then fine-tune single layers in the Timeline.

Open the animation panels for a layer

Every layer bar in the Timeline has three zones. Click a zone to open its panel.

Clicking the left, middle and right end of a layer bar opens Build In, Middle and Build Out

  1. Click Timeline (bottom right) if the Timeline is closed.

  2. Find the layer you want to animate in the list on the left.

  3. Click its bar:

    • the left end opens Build In (how the layer enters)

    • the middle opens Middle (movement while it's on screen)

    • the right end opens Build Out (how it exits)

  4. Pick a preset, or click the settings icon (sliders) in the panel header for advanced settings.

  5. Click anywhere on the empty stage to close the panel.

The animation tools in a design set

In a design set, the tools are split between the grid of all sizes and the edit mode for each size.

Design set grid view with the Layers, Slides and Animator tabs numbered

  1. Layers tab. Expand a layer to find Lock Transition, which keeps its animation the same in every size.

  2. Slides tab. Slides, slide transitions and Loop count for the whole set.

  3. Animator tab. Magic Animator for all sizes at once.

  4. Play previews all sizes.

  5. A size. Double-click it, or click its pencil icon, to open it in edit mode with its own Timeline.

A single size open in edit mode, with its own Timeline

  1. Size picker. Switch to another size without leaving edit mode.

  2. Timeline button. Opens or closes this size's Timeline.

  3. Previous / next size arrows.

  4. The size's Timeline. It works the same way as in a single design.

Press Esc, or double-click outside the banner, to go back to the grid.

Next steps

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.

Did this answer your question?