Now that you have all your elements in place, it’s time we tell you how to add more flavor. Or in other words: how to spice them up with animations. In Bannerwise you can add animations to all element types, except for videos and click areas. In this section of the Beginner’s Guide, we will teach you all the animation basics. 

There are several types of animations. In Bannerwise, we have divided them into three categories: enter, exit, and emphasis animations.
​
​Enter animation: this animation is used to let elements enter, or appear in, your ad.
​Exit animation: this animation is used to let elements exit, or disappear from, your ad.
​Emphasis animation: an emphasis animation is an animation to draw more focus to your element. 

Both the enter and exit animation categories have their own animation directions, styles and easing effects.
​
​Animation styles
There are three animation properties. One of them is "style". It’s the far-left section of the animation properties popover. You can select 8 different styles to add to your animations:

Animation directions
The middle animation section is the "direction" section. You can select 9 directors for elements to enter or exit your ad, such as "enter from below" or "from left". The arrows represent the direction your elements move towards. 

Animation easing effects
The far-right section in the animation properties popover displays all easing effects. These are playful motions that your elements can display:

When you add an emphasis animation, you can only select four different animation styles: scale down, scale up, shake and fade. 

Animation panels
To add an animation, you use the animation panels. You find these panels by selecting an element layer in the timeline. Now, you will see that it contains two animation panels. One of the very left and one on the very right of the timeline. There is a third panel, hidden between the two panels on the left and the right. We identify the three panels as follows: 

Adding an animation
You easily add animation by clicking on the animation panel. Then, the animation properties popover appears. Select either an animation style, direction or easing effect to give your element some pizzazz. When you have added an animation, the animation panel turns grey.

Adding an enter animation
We will start by adding an enter animation. This will let your element appear in your ad. For this, click on the “enter animation panel”. You will now see three animation options in the “animation properties popover”. From here, you can set a direction, style or easing-in effect. For example, when you look at the direction section, you will see an arrow named “from bottom”. This direction effect lets the element appear in your ad from below. If you click the arrow, you will see the element in motion.

Adding an exit animation
Another frequently used animation is the “exit animation”. As you can probably guess, this animation is responsible for letting elements exit the ad. First, select the layer of a specific element in the timeline. In the direction section, click the arrow named “to bottom”. Once selected, you will see the element exiting your ad, from its fixed position to the bottom. That’s it. 

Adding an emphasis animation
An example of an eye-catching animation is the “emphasis animation”. This is often used to emphasize an element. In most cases, they are used to give more attention to call to action buttons. In your timeline, you have to click in between the “enter animation” and “exit animation” panels. You’ll notice a green button appearing. When you click it, you will see that a third animation panel appeared. This is the “emphasis animation panel”. This contains style and repetition options. If you want, you can adjust the number of repetitions by clicking the buttons.

Adding a move animation
Sometimes the preset animations are not what you’re looking for. If that’s the case, your best solution is to add a “move animation”. For this, you have to, select your element via the timeline by clicking the layer. Then, select the “move style” in the style section. This style will create a duplicate of the selected element, which you can drag, drop, rotate and resize.

Please note that move animations are only available for enter and exit animations. Depending on the animation selected (enter or exit), your element will animate from or towards the duplicate element. The direction of which it is animating towards is indicated by a green beam coming from the original element. To learn more about this specific animation, head to this article.

The first part covered the basics of adding an animation to your HTML5 ad. In the next part of this Beginner’s Guide, we will explain how you can set the duration and adjust the animation properties, so you can animate your ads to your wishes.
​
​Adjusting the duration
When you navigate to the “enter animation” panel, you will see two small handlebars on both sides of the panel. The size of a panel represents the animation duration.

When you drag and drop one of the handlebars, you enlarge or increase the size of the panel. This means you will make the animation longer (by enlarging) or shorter (by reducing). Determine the preferred duration of your enter animation by dragging and dropping the handlebar. You can click the “play control” to see the result. When you are satisfied, the duration is set. 

Adjusting the starting time
While you sometimes want your animations to start right away, in some cases you want them to appear later on. That’s why you can also adjust the starting time of your animations. For this, you have to look at the “enter animation panel”. The far-left side of your panel represents the start of your animation, the far-right side represents the end. The timeline above indicates the total duration of your ad.

By dragging the complete “enter animation panel” aside on the timeline, you are able to adjust the starting time of your animation. Place the panel on a preferred position on the timeline to determine the starting time. Use the play controls to quickly view the outcome. When you’re happy, your starting time is set.

Removing animations
If you want to remove an animation, simply click the “animation panel”. Now, the animation properties popover will appear. Here, you can easily remove the animation by clicking the “none icon”. If you want to remove all selected styles, directions, and easing effects, you have to select the icon for all three. When you have removed all animations, the animation panel will turn white.
​
​Deleting your emphasis animation
Removing an emphasis animation is slightly different from removing an enter or exit animation. For this, click on the “emphasis animation panel” and click on the bin icon. To indicate your animation is removed, the emphasis animation panel will disappear.

That’s all!
Now you know how you can easily add and remove animations to your HTML5 ads, we can also explain the concept of slides. This helps you in showing and hiding messages, one by one. For this, we refer you to the next section of our Beginner’s Guide: Working with slides.