Presets cover most needs. When you want something specific, for example a button that rises, fades in and pops, build it yourself with Custom. A custom animation combines simple actions (move, fade, rotate, scale, flip, blur), and you can chain several steps of each.
The six actions
Open any build-in or build-out panel and click Custom. You'll see the actions you can combine:
Action | What it changes | Default when added |
Move | Position, along a path | From X 0 to X 50 px |
Opacity | Transparency | 0% to 100% |
Rotate | Rotation around the centre | 0° to 90° |
Scale | Size | 100% to 150% |
Flip | 3D card flip: Horizontal, Vertical or Both | 0° to 360° |
Blur | Sharpness | 0 to 2 px blur |
Every action also has Ease type and Tween type settings. These work the same way as in 04 · Add build-in, middle, and build-out animations, and custom actions also offer Bounce and Elastic tweens.
How custom animations work
Actions run at the same time. Add Move and Opacity, and the layer moves while it fades.
Each action gets its own track under the layer in the timeline. Click a track to edit that action.
Steps run one after another. Inside an action, click Add new … (for example Add new scale) to add a second step that starts when the first one ends.
Move values are offsets. They're measured from the layer's position on the canvas, not from the edge of the banner. From Y 30 → To Y 0 means "start 30 px lower and end where the layer sits".
To remove an action or step, open it and click Delete in its header.
Walkthrough: make a button rise, fade in and pop
In this example we animate the Book trip button.
1. Start a custom build-in
In the timeline, click the left part of the button's layer bar.
In the Build in panel, click Custom. The bar is now labelled Custom.
Good to know: choosing Custom replaces the build-in preset the layer had before.
2. Add the actions
Click + next to Opacity.
Click + next to Move.
Click on the stage to close the panel. Under the layer in the timeline you'll see a Move track and an Opacity track.
3. Set each action
Click the Move track. Set To X to 0 and From Y to 30. The button now rises 30 px into place. While the panel is open, a ghost copy on the canvas shows where the movement starts.
Click the Opacity track. Keep the default 0% → 100%, so the button fades in as it rises. The preview bar shows the fade.
4. Add a pop with two Scale steps
Open the Custom panel again (click the build-in part of the bar) and click + next to Scale.
Click the Scale track and set From 80%, To 110%. The button grows slightly past its normal size.
Click Add new scale. A second Scale step appears right after the first one.
Click the second step and set From 110%, To 100%. The button settles back to its normal size.
5. Check the result
Turn on Show current frame and click along the ruler, or press Play. Here's the result, captured from the editor:
The button rises from below, fades in, grows a little bigger than normal and settles. That pop draws the eye to the call to action.
Tips for good custom animations
Keep it short. Entrances of 0.5–1 s feel snappy. Longer ones feel slow in a banner that only plays for a few seconds.
Use small values. 20–40 px of movement and 80–110% scale look smooth. Large jumps look jumpy at small banner sizes.
Pair Move with Opacity. Layers that slide in from invisible look cleaner than layers that pop up already visible.
Reuse your work. Copy a finished custom animation and paste it on other layers. See 07 · Copy and reuse animations.
Next steps
06 · Add slide transitions and control looping – set how slides change and how often the banner plays.
07 · Copy and reuse animations – apply your custom animation to other layers and sizes.
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.