Skip to main content

Custom Animations

Create richer, more dynamic animations by combining multiple animation effects on a single element. With Custom Animations, you can layer actions like movement, rotation, scaling, opacity, blur, and more to build smooth animations.

Custom Animations let you combine multiple animation actions on a single element, giving you greater control over how objects animate throughout your design.

Instead of applying just one animation effect, you can stack several actions together to create more engaging, professional-looking animations.

Bannersnack Custom Animations panel showing layered animation actions including Move, Opacity, Rotate, Scale, Flip, and Blur for creating advanced keyframe-style HTML5 banner animations.

What Are Custom Animations?

Custom Animations allow you to build layered animation sequences by adding multiple animation actions to the same animation layer.

You can combine effects such as:

  • Move

  • Opacity (Fade In / Out)

  • Rotate

  • Scale

  • Flip

  • Blur

Each action works together to create a more natural and polished animation.

How to Create a Custom Animation

  1. Select an element on your canvas.

  2. Open the Timeline panel.

  3. Select a Built In, Middle or Build out animation.

  4. In the Custom section, click the + button next to any available action.

  5. Continue adding additional actions to combine multiple effects.

You can mix and match actions to create the exact animation you need.

Available Animation Actions

Move

Animate an element along a custom path.

Opacity

Fade elements in or out smoothly.

Rotate

Spin an element around its center point.

Scale

Grow or shrink an element during the animation.

Flip

Create horizontal or vertical flip animations.

Blur

Animate blur effects for soft focus transitions.

Why Use Custom Animations?

Layering multiple animation effects allows you to create more sophisticated designs without increasing complexity.

For example, a button can:

  • Fade in

  • Scale up

  • Slightly rotate

  • Move into position

All as part of a single animation sequence.

Best Practices

  • Combine only a few effects to keep animations smooth and natural.

  • Use subtle movement and scaling for modern UI animations.

  • Pair opacity with movement for clean entrance and exit effects.

  • Add blur sparingly to create focus transitions.

  • Preview your animation to ensure all actions work together as intended.

Tips

Custom Animations are ideal for:

  • Call-to-action buttons

  • Product highlights

  • Text reveals

  • Hero banners

  • Interactive HTML5 ads

  • Attention-grabbing promotional creatives

By combining multiple animation actions, you can create richer motion effects while keeping your workflow simple and efficient.

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?