CREATING ANIMATED ADS

Animation Features in the Adacado Creative Editor

Movement Animation

Animation effects range from simple transitions to complex sequences of movements. Currently, Adacado provides the ability to configure simple movement effects and set animation timelines for text or image widgets used in ads. Stay tuned for more options to choose from different animations, such as color transitions, adjusting the opacity of images and text, and more.

Where to Find Animation Feature: Layers Panel

Click anywhere on a template in the editor to open that template’s Layers panel at the bottom of the creative editor. You can add or delete animations to individual widgets in the template in the Layers panel and adjust animation settings. Also, you can resize the panel vertically by clicking and dragging the top edge, or you can collapse and unfold the panel by clicking the arrow at the top of the panel.

Layers

The Layers panel displays layers of individual widgets in the template from top to bottom. Each layer displays the widget name, the thumbnail of the assets used for each widget, and the timeline for each individual widget animation by animation type. The top layer indicates the widget placed at the front or most recently added to the template, and the bottom layer represents the widget placed at the back of the template.

You can hide or show individual layers in the template by clicking the eye icon, and hiding the layer does not hide or remove it from the actual ad. You can also delete a layer by clicking on the trash bin icon, and deleting a layer will remove the widget permanently from the ad. If you accidentally delete a layer, you can always add the same widget back to the template.

Timelines

Each layer shows an animation timeline for an individual widget, including template transition in/out times, animation duration, and timing. Gray bars represent template transition in/out times, and green bars represent animation duration. Also, you will see a red bar on the timeline if the animation playing time exceeds the template display time or the maximum ad playing of 30 seconds. In this case, you need to adjust the animation duration in the Animation Settings in the Layers panel or adjust the template display time in the Adjust Template Transition Settings in the template footer.

Timeline adjustments for individual widgets to increase or decrease template transition in/out times, animation duration, and animation start time can be done in Animation settings or directly on the timeline by dragging the edge of the gray and green bars.

Example: Single Template Ad

If you use a single template for your ad, you’ll see a timeline of 30 seconds total, including the template transition in time (1.0 seconds) by default, as in this example. This example has no timeline for template transition out because single template ads do not transit; therefore, only the time for template transition in is shown.

In this example, the maximum configurable animation duration is 29 seconds, and a single widget can consume the entire 29 seconds, or you can animate multiple widgets at different timings within 29 seconds.

Example: Multiple Templates Ad

Let’s select the Mist template as an example from the template library. If you choose the Mist template, you will see that each ad size contains five templates. You can see the template display time in the footer of each template, which by default is set to show each template for 6.0 seconds before switching to the next one. Template display time includes template transition in/out times of 1.0 seconds each, and the sum of the template display times for all templates added to an ad must stay within the limit of 30 seconds of maximum ad playing time.

In this example, the timeline displays 6.0 seconds, equal to each template’s display time, with a template transition in/out times of 1.0 second each. Therefore, if you want to add animations to this template, you need to set the animation duration to a maximum of 4.0 seconds. If the animation duration exceeds 4.0 seconds, the animation timeline is displayed in red and warns you to adjust the animation timing to fit within the individual template display time limit.

Additional Benefits of Using the Layers Panel

In addition to setting animation for individual widgets, the Layers panel allows you to easily select and edit the widgets placed behind other widgets due to the order of their placement on the template. It also helps you identify and remove unnecessary widgets hidden behind other widgets in designing or customizing a template.

How to Add and Delete Animations on Individual Widgets

To add animations to the widgets you want, follow these steps:

1. First, choose a pre-built template for your ad creative from the Adacado template library and edit the template in the creative editor. Of course, you can also create your own template from scratch.
2. Click anywhere on the template to open the Layers panel for the selected template, add movement animations to the desired image or text widget, and adjust animation settings.
3. Click the green play button to the left of the template to preview the ad with animation in Ad Preview. 
4. Adjust animation settings to optimize animation. For example, if you have product data generated from a data feed, preview your ad with the product data and adjust the animation to work best with your product.

If you want to delete an animation, click the “Delete Animation” button in the animation settings.

Adding Animation

Right-click the widget layer you want to add the movement animation. Then, you will see the “Add Movement Animation” button.

This button will open the Animation Settings box and automatically add the animation duration timeline with the green bar set to the default animation settings to the selected layer timeline. The template also displays the start and end circles of the animation, where you can set the starting direction of the animation for the selected widget.

Start and End Circles

The start circle determines from which direction the movement animation is coming, and the end circle is the point where the animation ends. You can move the two circles around and adjust the direction of each circle and the distance between them. Moving the end circle also moves the widget, determining where the animation will eventually end up. 

*NOTE*

When positioning the start circle, remember that it is the center of the widget where the animation starts, as shown below. Placing the start circle near the template border and setting the “When to start” time to a number higher than 0 seconds may cause unexpected behavior.

Let’s suppose 

• The product image has a background.
• The animation start time of the product image is set to 1.0 seconds.
• The animation duration time is set to 2.0 seconds.

If you place the start circle near the template border on the right, the ad will partially display the left part of the product image for 1.0 seconds after the template comes into view, as in the example below. The animation then starts at 2.0 seconds in the timeline and stops at 4.0 seconds.

Animation Settings

When to start

This setting indicates when to start the animation of the selected widget. The default start time is set to 0 seconds, and the animation begins after the template’s transition in has finished.

How long to play

This setting indicates how long it takes for the selected widget to move from the start point to the endpoint. The default setting is 2.0 seconds, which means that the movement of the chosen widget will continue for 2 seconds, then stop at the endpoint 2 seconds after it starts.

As an example below, you can also add animations with different durations and timings to multiple widgets in a single template. If the total animation duration of multiple widgets exceeds the maximum ad play length of 30 seconds, the widget animation timeline bar turns red and warns you to adjust the timeline. In most cases, you should apply animation to critical elements to emphasize your product or message without diminishing the user experience of the ad.

How Many Times to Loop

This setting sets the number of times the animation repeats 

Animation Smoothness

Ease-Out

This setting sets the selected widget to start moving quickly and slow down over time. 

Linear

This setting sets the selected widget to move at a constant speed. 

Ease-In

This setting sets the selected widget to start slowly and speed up over time. 

Examples of How to Create Animated Ads with Pre-Built Templates

Text-Only Ads

1. Select the “Cinch” template from the template library for retail advertisers.

2. Edit the template by adding your logo and changing the message and font size or color.
3. Add animations at different timings to the Promotion Text and CTA Button widgets.

4. Click the green play button to the left of the template and preview the animated ad.

5. Adjust the animation settings until it works best for conveying and emphasizing your message.

Single Product (Vehicle) Ads

1. Choose the “Auto 300×250 Showcase-4” template from the template library for auto advertisers.

2. Add animations to vehicle data widgets (Product Image, Year, Make, Model, Price, and Mileage) with the same animation settings.
3. Add animation to the Promotion Text and adjust the starting point of the widget to start on the right side of the template. Set the animation to begin after all vehicle information animations have been completed.

4. Click the green play button to preview the animated ad.

Single Template Ad with Sale Banner and Promotion Text

1. Choose the “CyberMonday 300×250-10” template from the template library” for retail advertisers.

2. Add an animation starting from the upper right to the “Cyber Monday Sale” banner and another animation starting from the left to the Promotion Text.

3. Click the green play button to preview the animated ad. If you’ve added product data to your campaign, preview the ad with product data.

Static Seasonal Ads without Product Data

1. Choose the “Christmas 300×250-12” template from the template library” for retail advertisers.

2. Edit the template and add animations to the images and the Promotion Text on the left. You can also set how many times the animation will loop.

3. Click the green play button to preview the animated ad.

Ads with Multiple Templates

1. Choose the “Twinkle 300×250” template from the template library for retail advertisers.

2. Add animation to the Product Title widget and set the animation duration within 4.0 seconds. When you set an animation in a template, the animation is automatically added to the rest of the template with the same animation settings.

3. If you already have added product data to your campaign, preview the animated ad with product data.

Multiview Ads

1. Choose the “Top10 300×250 V1-5” template from the template library for retail advertisers.

2. Add an animation to the left product data (Product Image, Price, and Product Title) to show it first. Next, add another animation to the top 2 product images to slide in from the top, then add the last animation to the bottom 2 product images.

3. If you already have added product data to your campaign, preview the animated ad with product data.

Multiview Ads Displaying Sale Banner Only When Product Has a Sale Price

1. Choose the “Top10 300×250 V1-4” template from the template library for retail advertisers.

2. Add animation to both sale banners and save the template.

3. Add a data feed and generate product data for your campaign. If you want the sale banner to appear only if the product has a sale price, you must map the sale price column in your data feed before processing the feed. Click here to learn more about the selective display of product data and ad elements.
4. After generating your product data, navigate back to the Creative page and click on each sale banner in the template to open its widget inspector on the right. Now you can see that the “When to show this element” field is enabled for the “Image” widget and the default condition is set to “Always show”.

When you open the “When to show this element” field drop-down, you see a list of
conditions that determine when to display the sale banner. In this example, select
“Show only when there is Sale Price data” from the list.

5. Check out the animated ad in the Ad Preview and make sure the sale banner only appears when the product has a sale price.

When Adding a Template to a Single Template Ad

If you choose a single template and want to add a template to your ad, you should first increase the template display time to ensure sufficient time for the animation to play.

1. Choose the “Top10 300×250 V1-2” template from the template library for the retail advertiser and add the same template to the ad. Each template’s display time is set to 2.0 seconds, including a template transition in/out times of 1.0 seconds each, and as you can see, there are no time slots available for animation within 2.0 seconds.

2. In this case, increase the template display time in Adjust Template Timing Settings for each template.

3. Then add animations to the widgets within the template display time.

4. If you already have added product data to your campaign, preview the animated ad with product data.

Static Ad with No Product Data

If you’re still having trouble or have questions, feel free to reach out to us anytime at support@adacado.com