Animating your ads will help them stand out from the crowd. In this tutorial, we will cover the basics and explain how you can add professional-looking animations with our ad-builder, one step at a time. 

Simply select an element of your ad by clicking on its layer in the timeline. You can also select the element by clicking on it in your canvas, but for this tutorial, we will work from the timeline.
​
When you select the layer in the timeline, 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: 

We will start by adding an enter animation. This will let your element appear in your ad. First, click on the “enter animation panel”. 

Then, you will see three animation options in the “animation properties popover”. The options are style, direction, or easing effect. To help you get the hang of adding animations, we will start by adding a direction effect.

Later on, we will explain how to add styles and easing effects. Combining them will result in an eye-catching ad, with professional-looking animations. 

Setting a direction effect
First, take a look at the direction section. Click on the arrow named “from bottom”. This means the element will appear in your ad from below. If you click the arrow, you will see the element in motion.

You have now added your first animation. Instantly, the enter animation panel will turn grey. This indicates that an animation has been added successfully. Empty animation panels remain white.

Setting the style
In addition to direction options you’ve set for your enter animation, you can also determine a preferred style. When you click the layer, you will see the “style section” next to the direction section you’ve used before. This contains animation styles such as fading in and scaling up.

For now, click on the “scale up” option. You will now notice that the element not only enters but also becomes bigger on its way in.

Setting the easing effect
You can also add “easing effects” to your animation. These effects are responsible for the distribution over time. For example, the “ease in effect” will let your animations start slow and end fast. It can also let your elements bounce, or make a circular movement. 

To put this in practice, select the layer of your element. In the “ease section”, click on “bounce out”. The element will animate in, with a bouncy effect. This gives your animation a cheerful, energetic look.

You can play around with the animation effects as much as you like. When you’re ready, we will continue by adjusting the animation to your liking. 

Optional: Removing animations
Grey animation panels indicate that they contain an animation. 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 style, direction, and easing effects, you have to select the icon for all three. When you have removed all animations, the animation panel will turn white.

The first part covered the basics of setting your first animation. In the next part of this tutorial, we’ll dive deeper into the settings, so you can animate your ads to your wishes. 

Now that your first animations are set, it’s time to find out how you can adjust the duration of your animation. We will use the enter animation as an example. 

Look at the “enter animation” panel. Here, 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). Now, determine the preferred duration of your enter animation by dragging and dropping the handlebar. Click the “play control” to see the result. When you are satisfied, the duration is set. 

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. Again, 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.

By adding multiple animations to your ad, you will give your ads a professional look and feel. Now you know how to add an enter animation, we will also explain how to add an “exit animation” and an “emphasis 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 it's fixed position to the bottom. That’s it! 

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, bring your mouse on top of a layer. Click in between the “enter animation” and “exit animation” panels. You’ll notice a green button appearing. Click on it. Now, you will see that a third animation panel appeared. This is the “emphasis animation panel”. This contains style and repetition options.

For now, we are going to select the “scale up” style. This is but one of many examples of an emphasis animation. In the style section, click on the icon named “scale up”. After selecting, your element will scale up three times before ending at its final size. The reason why it scales up three times is that the set repetitions are by default set to 3. If you want, you can adjust the number of repetitions by clicking the buttons.  
​
Now, you have set your first emphasis animation to catch your audience’s eye. If you want to try out other emphasis animations, you can also select other styles in the “style section”, or play with the number of repetitions.

Optional: Deleting your emphasis animation
In contrast to the “enter” and “exit” animation, you can easily remove an emphasis 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. 

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”. First, 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 entering and exit animations. Depending on the animation selected (enter or exit), your element will animate from or toward the duplicate element. The direction in which it is animating is indicated by a green beam coming from the original element.

Want to learn more? Check out the following tutorials: