Every layer can have up to three animations:
Build in – how the layer enters.
Middle – what it does while on screen, for example a pulse to draw attention to a button.
Build out – how it leaves.
You set each one by clicking its part of the layer bar in the timeline. If you're new to the timeline, read 03 · Use the animation timeline first.
Step 1 – Apply a build-in preset
In the timeline, click the left part of a layer bar (the build-in zone).
The Build in panel opens with a grid of presets. Use the arrows at the bottom to see more pages.
Click a preset. It's applied right away, and the bar shows its name.
Available presets (some only appear for text layers, see below):
Feel | Presets |
Simple | Basic, Fade |
Blur | Soft blur, Hard blur, Focus |
Movement | Slide right, Slide left, Slide up, Slide down, Glide, Fly, Run right, Run left, Roll down, Roll up |
Size | Scale up, Scale down, Grow, Blow, Zoom |
Spring | Bounce, Elastic, Swing, Wiggle |
3D & rotation | Flip up, Flip down, Flip left, Flip right, Reveal, Rotate in, Rotate out |
Mask | Slit, Step, Wipe |
To remove a build-in animation, choose None.
Tip: not sure which one to choose? Click a few presets in a row, then press Play. Applying a new preset replaces the previous one, so experimenting is safe.
Step 2 – Fine-tune it in advanced settings
Every preset is built on a transition type with its own settings. You can change them all.
With the Build in panel open, click the sliders icon in the top-right corner of the panel.
The advanced settings open. Change any of the options below.
Click the play button next to the transition type to preview just this animation.
Click Back to return to the presets.
Here's what each setting does, using Slide as an example:
# | Setting | What it does |
1 | Transition type | The base effect: None, Slit, Step, Wipe, Fly, Swing, Wiggle, Alpha, Blur, Slide, Scale, Roll, Zoom, Flip or Rotate. Text layers also get the text effects. |
2 | Preview | Plays this animation on its own. |
3 | Normal / Bounce / Elastic | Only for Slide and Scale. Bounce and Elastic add a springy finish. Ease and tween are turned off for them. |
4 | Ease type | Ease Out (fast, then slows down), Ease In (slow, then speeds up), Ease In Out, or Linear (constant speed). |
5 | Tween type | The shape of the speed curve: None, Sine, Cubic, Quad, Quart, Quint, Expo, Circ, Strong or Back. Back overshoots slightly before settling. |
6 | Direction | Where the layer comes from (see the table below). |
7 | Offset | How far the layer travels, in pixels. |
8 | Alpha | The starting opacity. 0 means it fades in from invisible. |
9 | Copy / Paste | Copy this animation and paste it on other layers. See 07 · Copy and reuse animations. |
The available directions depend on the transition type:
Transition | Direction options |
Slide, Roll | Left to right, Right to left, Top to bottom, Bottom to top, or Custom (set exact X and Y offsets) |
Scale, Zoom | Center, or one of the four sides |
Flip | 8 directions |
Step | 9 starting points |
Fly | Top, Right, Bottom or Left, each Forward or Back |
Swing | One of the four corners |
Slit | Vertical, Horizontal, Top right, Top left |
Wipe | Four directions, plus Reverse |
Rotate | Forward or Backward |
Once you change a setting, the bar label gets (C) for customised, for example Alpha (C).
Step 3 – Add a build-out animation
Build out works exactly like build in, but it controls how the layer leaves the design.
Click the right part of the layer bar.
Pick a preset in the Build out panel. Choose None if the layer should simply stay until the end.
Use the sliders icon to fine-tune it, as in Step 2.
Tip: on the last slide of a banner that plays once, keep the build-out on None for your key layers so the final message stays on screen.
Step 4 – Add a middle animation
Middle animations play while the layer is on screen. They're great for drawing the eye to a call-to-action button.
Click the middle part of a layer bar.
Pick a preset: Heartbeat, Wiggle, Vibrate, Flicker, Move, Shake, Jello, Bounce, Pulsate, Ping or Blink.
Under Start / End, choose when it plays:
Timeline – plays during the middle zone of the bar.
On hover – plays when the viewer moves their mouse over the layer.
Infinite loop – keeps repeating.
(Optional) Click the sliders icon to set the Motion time (how long one cycle takes), a variation, and easing.
Some presets are variations of each other. You can switch between them in the Variations dropdown:
Preset | Variations |
Pulsate | Forward, Backward, Heartbeat, Ping |
Shake | Horizontal, Vertical, Top, Left-right, Left, Right (Move is one of these) |
Bounce | Top, Bottom, Left, Right |
Jello | Horizontal, Vertical |
Text effects
When the layer is a text layer, the Build in and Build out panels include extra effects that animate letters or words one by one:
Effect | What it does | Settings |
Typewriter | Types the text letter by letter | – |
Clarify | Letters come into focus | No extra settings |
Tracking | Letters spread out or pull together | Expand / Contract, letter spacing, alpha |
Words fade | Words fade in one at a time | Words duration; order: Random, Left to right, Right to left |
Words Blur | Words blur into focus one at a time | Words duration; order: Random, Left to right, Right to left |
Here's Typewriter on our headline, captured from the editor:
Tip: text effects take longer to read than a simple fade. Give the build-in zone enough time (drag its edge in the timeline), so the full text appears well before the layer leaves.
Next steps
05 · Create custom animations – combine moves, rotations and more into your own animation.
07 · Copy and reuse animations – apply the same animation to several layers at once.
08 · Preview and export animated designs – check the 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.