Creating your first banner with Animation

So at this point, we're just going to make a simple 300x250 banner, showing you the entire process from creating a project to previewing your own banner. We will show you where to click and what to fill in, and if you need additional information, most of the steps will link towards articles for an in-depth explanation

Create an adset

You can either use the navigation panel or the form at the home screen. Select "Project 01". Name it however you want to.

Create an empty 300x250 banner

In the Adset Manager, click the "Add banner" button. Select the 300x250 format, and then the 300x250 Empty preset. Name it however you want it.

Add an image element for the background

In the editor, drag a new image element from the components to the canvas. Drag it to the top left corner of the canvas and expand it's size so it covers the entire banner. You can use your mouse or use the properties panel on the bottom left, by entering 0 as the X/Y coordinates and 300 and 250 for the width and height respectively. Upload a suitable background image and rename the element to "background" in the elements list. 

Add another image element for the product

Drag another image element to the canvas. You can keep the size unchanged, and simply upload an image that would fit the description of "a product". 

Add product text

Drag a text element to the canvas. Change the styling so it looks bigger and fits the background and select another font for it. Change the value to something that represents the product image you just uploaded.

Add a Rectangle as a footer

Drag a rectangle element to the canvas. Change the width and height and position of the rectangle so that it covers around 20% of the bottom of the banner. You can change the properties and styling as you wish. 

Put the text on top of the footer

Select the product text and place it on top of the footer. 

Hint: Use the element list to make sure the text is higher than the Rectangle footer. 

Create an action & sequence

Now that we have set up a basic banner, let's add some animations to it. First, switch to the "actions and animations" tab. Click the + Icon next to the word "Actions" to add a new one. 

Then, select in the when dropdown "banner loads" and "Start animation" in the action dropdown. This should make a third dropdown appear. Select the option "Create new". That should automatically create sequence 0 in the Animations panel. 

Animate Elements

In the Animations panel, you should now see sequence 0 with a form to select and animate the first element of the banner. 

Select the element to "background" in the dropdown, and set the animation to "fadein". Don't worry about order, easing and duration. 

Note: Click the + icon next to the sequence to add another element.

Add the following elements and set the following types of animations:

ProductImage - FlyInFromRight

ProductText - FlyInFromBottom

Change the sequence so that the Product Image and the product text Start to appear at the same time.

This can be done in the "order" settings of an element in the sequence.

Save and preview the banner

Click the Eye Icon in the top-right corner of the Canvas, and the banner will save and then show you a preview.