Magic Animator animates every layer of your design in one click. Pick a template, preview it on your own design, and apply it. Each layer gets a build-in and a build-out animation, timed so the layers come in one after another. You can then fine-tune anything in the timeline.
Good to know: applying a template replaces the animations already on your layers. If you have custom animations you want to keep, try templates on a duplicate slide first.
Step 1 – Open Magic Animator
Open your design in the editor.
Click Animator in the left toolbar.
The Magic Animator panel opens with a grid of templates, each shown as a letter: None, Alpha, Bounce, Cross, Drop, Expand, Flip, Grow, Hit, Intersect, Joy and Keynote.
The whole flow, from opening the panel to applying a template, looks like this:
Step 2 – Preview a template
Hover over a template tile. A Preview button appears.
Click Preview. A preview window opens and plays the template on your actual design.
# | Control | What it does |
1 | Left arrow | Go to the previous template |
2 | Right arrow | Go to the next template |
3 | Replay | Play the preview again from the start |
4 | Apply on all slides | Apply the template to every slide, not just the current one |
5 | Apply and use | Apply the template and close the window |
Tip: keep clicking the arrows to compare templates on your own design before you decide. Click Cancel to close the window without changing anything.
Step 3 – Apply the template
(Optional) Tick Apply on all slides if your design has several slides and you want them all animated the same way. The note under the checkbox changes to remind you that transitions on every existing slide will be replaced.
Click Apply and use.
The window closes, and every layer bar in the timeline now shows a build-in and a build-out animation. Bars from a template are marked (C), for example Alpha (C). This means the preset was customised with the template's settings.
Step 4 – Play it back
Click Play in the toolbar above the canvas, or the play button next to Layers in the timeline, to watch the result.
Here is the Bounce template on a 300 × 250 banner, captured from the editor in 0.2-second steps:
The background fades in first. Then the card, price, location, headline and logo follow one after another.
How layer order affects the result
Magic Animator staggers the layers based on their order in the Layers list. The bottom layer animates first and the top layer animates last.
In this example the Text shape (the pink card, at the bottom of the list) starts first. Logo, at the top, comes in last.
To change the order things appear in:
In the Layers list, drag a layer up or down using its handle (≡) on the left.
Apply the template again. The new order is used for the stagger.
Tip: layers at the top of the list also sit on top of the canvas. Moving a layer changes both what is in front and when it appears, so check the canvas after reordering.
Use Magic Animator in a design set
In a design set, one template animates every size at once.
Open the design set. In the left panel, click the Animator tab (next to Layers and Slides).
Click a template. The Magic Animator preview page opens.
Use the size dropdown to see the template on a specific size. Or click the grid icon next to it to see All Sizes side by side.
In the All Sizes view, click Play under any size to replay it. You can also use your keyboard's left and right arrows to switch between templates.
Click Apply and use to animate all sizes, or Back to return without changes.
Fine-tune the result
A template is a starting point. Everything it creates can be edited in the timeline:
Change timing: drag a layer bar left or right to make the layer appear earlier or later.
Change length: drag the edge of a build-in or build-out zone to make that animation faster or slower.
Change the effect: click the build-in (left) or build-out (right) part of a bar to pick a different preset or adjust its settings.
Try another template: open Animator again and apply a different one. It replaces the current animations.
See 03 · Use the animation timeline and 04 · Add build-in, middle, and build-out animations for the details.
Next steps
03 · Use the animation timeline – move, resize and scrub through your animation.
04 · Add build-in, middle, and build-out animations – change presets and settings per layer.
08 · Preview and export animated designs – check the final result and export it.
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.