How can we help you today?

How to design animated banner ads

Let’s learn how you can design animated banners with Bannersnack. There are two ways in which you can create one: by using a template or by designing one from scratch. Let’s go:


Create an animated banner using a template

A. Select a banner size then an animated template

To create an animated banner you start as you would a static one. Choose Single Banner, select a size, go to the animated templates tab then choose the one you like best.


Edit the template and Save it

Change the elements in the template as to make the banner your own. You can change the background, image, text and logo. Then simply save your banner.

B. Create an animated banner from scratch

Start designing your first slide
Go through all of the regular steps you would take to design a static banner.  Add a background color, image, text and call to action.

Add transition effects to the elements
Each element has a “Build in” and “Build out” transition effect. The first will mark the entrance of the element and the second its exit. Make small adjustments (delay, duration) to each transition.

Duplicate or create new slides
To make your animated banner even more dynamic you can duplicate or create new slides. Then you can add the transitions to switch from the first to the next.

Preview and save your animated banner
The same as with a static banner you now preview it and then save it. You can do it by clicking on the Save button or by using the Ctrl-S (Cmd-S) combination on your keyboard.

Download as HTML5 or copy embed code
Once saved simply go to your banner in the “My Banners” page, click VIEW and download your animated banner in HTML5 format or copy the embed code if you want to insert it into your website.


Creating an animated banner is really easy and fun. All it takes is time and practice. Enjoy!

You can also check out this video on how to design animated banners from scratch:


Please sign in to leave a comment.