A banner can have several slides, like scenes in a short video. Each slide has its own layers and layer animations. Slide transitions control how one slide changes into the next, and loop count controls how many times the whole banner plays.
The Slides panel
The Slides panel is on the right side of the editor.
# | Control | What it does |
1 | Time | The current slide's length / the banner's total length, for example 5.0 s / 11.6 s. |
2 | Slide duration | How long the slide stays on screen. Click it to change it. |
3 | Stop slide | Stops the banner on this slide instead of moving on. |
4 | Duplicate | Copies the slide, layers and animations included. Hover the slide to see it. |
5 | Delete | Removes the slide. Hover the slide to see it. |
6 | Transition | Opens the settings for the transition to the next slide. |
7 | Transition length | How long the change between slides takes (0.8 s by default). |
8 | Loop count | How many times the banner plays. |
9 | Timeline | Shows or hides the animation timeline. |
Step 1 – Add slides and set their length
Scroll to the bottom of the Slides panel and click the + tile to add a new slide. A new slide lasts 6 seconds by default.
Or hover an existing slide and click Duplicate to copy it, which is handy when the next scene reuses most of the design.
Click the duration under a slide (for example 5.0 s) and type a new length.
How slide length and layer animations fit together: the timeline of a slide is exactly as long as the slide. All of that slide's layer animations (build in, middle and build out) play inside that time. When the slide ends, the slide transition starts. If you make a slide shorter, check its timeline so no animation is cut off at the end.
Step 2 – Choose a slide transition
Click the transition icon under a slide.
In the Slide transition panel, choose a Type:
Hide current slide – the current slide animates out and reveals the next one.
Show next slide – the next slide animates in on top of the current one.
Cross slide – both slides animate at the same time.
Choose the effect: the same list as layer animations (for example Alpha, Blur, Slide, Scale, Wipe or Flip).
Set Ease type and Tween type to shape the motion.
To change how long the transition takes, click its length (for example 0.8 s) and type a new value.
Tip: a short Cross slide with Alpha (a soft crossfade) works for almost any banner. Use stronger effects such as Slide or Flip sparingly, so they don't compete with your layer animations.
Step 3 – Set how often the banner plays
Under the slides, open Loop count.
Choose Once, a number from 2 to 7, or Forever.
To stop on a specific slide instead of the last one, turn on Stop slide for that slide.
Ad networks often limit animation length. Many networks, Google Ads among them, require animations to stop within 30 seconds, loops included. Multiply your banner's total length by the loop count to check. See 08 · Preview and export animated designs.
Step 4 – Preview the whole banner
The Play button above the canvas plays the current slide only.
To see every slide and transition in order, open the dropdown arrow next to Play and choose Play all slides.
Next steps
07 · Copy and reuse animations – reuse animations across layers, slides and sizes.
08 · Preview and export animated designs – check timing and export.
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.