Skip to main content

How to Create an Animated Design

Learn how to create animated banner designs using templates or custom slides. Add transitions and export as HTML5, GIF, or MP4.

Updated this week

Creating animated designs is a great way to grab attention and boost engagement on websites, emails, or social media platforms. With Bannersnack, you can create animated banners, slideshows, or ads easily—whether you start from a template or build your own from scratch.

Option 1: Create an Animated Design from a Template

  1. Choose a Design Size

    • Click Create New, select Single Design, and choose your preferred size (e.g., Leaderboard, Facebook Post, or Instagram Story).

    • Navigate to the Animated Templates tab.

  2. Select a Template

    • Browse our collection of motion-ready designs and choose one that fits your campaign or brand.

  3. Customize the Design

    • Replace the text, images, logos, and buttons with your own content.

    • Adjust colors, fonts, and layout elements to match your brand identity.

  4. Fine-Tune Animations

    • Use the Timeline to edit existing transitions.

    • Apply "Build In" and "Build Out" effects to specific layers, customizing delay and duration for smooth visual flow.

Option 2: Create an Animated Design from Scratch

  1. Set Up the First Slide

    • Choose a design size and start from a blank canvas.

    • Add your background, text, images, or call-to-action buttons.

  2. Animate Your Elements

    • Open the Timeline.

    • Apply Build In and Build Out animations to each layer (text, image, button, etc.).

    • Adjust delay, duration, easing, and alpha settings to create polished movement.

  3. Add More Slides

    • Click the Add Slide or Duplicate Slide button.

    • Transition between slides using slide transitions for a dynamic, multi-part ad.

  4. Preview Your Animation

    • Use the Play button in the Timeline to test your animation and tweak it before publishing.

Export and Share Your Animated Design

Once your animation is complete:

  • Click View from your Workspace.

  • Download your animated design in:

    • HTML5 for banner ad platforms (e.g., Google Ads, Adform)

    • MP4 for social media platforms (Facebook, Instagram, YouTube)

    • GIF for emails or simple animated visuals

  • Or, copy the Embed Code to use the animation directly on your website.

Pro Tips for Better Animated Designs

  • Use fewer layers per slide for better performance in HTML5.

  • Keep animations under 30 seconds to comply with most ad network rules.

  • Use consistent transition styles across slides to maintain a smooth viewer experience.

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?