Welcome! In this article I will teach you how to use transitions to create a smooth flow when your ad switches frames or loops.
I hope you'll find use for some loops in your ads!
Nico, CX Specialist | Zuuvi
Looping of ads means that they keep playing for a specific number of times (as long as you do not click on the ad). 🤓
Usually, an ad loops three times. In Studio you can choose between 0-3 loops in the menu to the right under "Template Settings".
See what cool loops and frame transitions can look like 👇
To make a smooth transition between the loops you need to add a box/rectangle, which also can be the transition between the different frames and be used as the background of your text elements.
Would you like to mimic the art? 🎨
Watch the how-to video right below or scroll past it and follow the steps below. 👇
This example takes part of a Standard Display ad in size 930x600.
First thing before adding animation:
-
Add your elements (text, images, logo, etc.) and place the layers in the right order.
-
If you want some elements to animate the same way, you can add them to a group.
Let's make the frame transition:
Add a rectangle in the preferred color and make it cover the whole format - in this case 930x600. Add the move animation to the element and set the animation settings like below:
-
Direction: "End with"
-
X Value: -620 pixels
-
Easing: Linear
Now 310 pixels of the rectangle are still covering the format and will be used as the background of the text, CTA, and logo.
Loop transition:
To make the loop transition smooth add the move animation again, but set the animation settings like this:
-
Direction: "End with"
-
X Value: 620 pixels
-
Easing: Linear
Remember to add the animation at the end of the timeline, and click "Only on repeat". "Only on repeat" means that the end frame after the chosen amount of loops will be without the "last" move animation.
That's It!
Now let's make some (almost) never-ending ads!
I hope you found this article helpful! Best of luck with your ad creation.