User Initiated Events

Events allow you to set custom triggers to change images, fade an image/object in or out, and scale images/objects. These events can be initiated on hover over, hover off, or click!

Resources:

Explore our Ad Gallery for examples of this feature

In this article, you will learn:

How to Add an Event to an Image Asset

How to Configure the Event Settings

How to Set Hover Events on Images

How to Set Fade Events on Images

How to Set Scale Events on Images

How to Add an Event to an Image Asset

1. Choose the ad format and dimensions of the ad unit you wish to add the event to.  For guidance on building specific formats, check out this article.
2. Open your ad unit within the builder, and ensure that you have uploaded all assets for your ad unit.
   * Note - You will need separate image files if changing from one image to another image.
3. Once your assets have been uploaded to your canvas, select the layer you would like to add an event to.
4. Within the right side dynamic properties panel, navigate to the "Events" section, and click "Add Event":
   
   
   
   
5. You'll then see the option to choose the event type, action type, and the delay, if applicable (in milliseconds):
   
   

* Note - You can delete events by clicking the minus symbol (-) in the top right of the event. 

How to Configure the Event Settings

The configuration options for adding events are explained below:

How to Set Hover Events on Images

1. In the example below, we'll be adding a hover state to an image so that the image changes from cookie dough to baked cookies on hover over! 
   (see video example at the top of the page)
2. Prepare your assets.
   * Note - You will need separate image files if changing from one image to another image.
3. For this example, we'll be using two images: 
   "cookies-before.png", and "cookies-after.png".
4. Click on the Asset icon and select or upload all images for your unit.
5. Prepare your unit and organize all other assets on your canvas.
6. Add the "before" image to your canvas:
   
   
   * Note - We'll be adding the hover event to the center image of the cookie dough on the baking sheet (i.e. "cookies-before.png").
7. With your asset selected, you'll see the Event Properties displayed in the Properties panel on the bottom right side of the builder:
   
   
   
8. Click “Add Event” and you can now configure your first event (Event 1):
   
   
   
9. For Type, select "Hover Over", and for Action, select "Change Image":
   
   
   
10. For "Change Image" event actions, an Image Source field will display. Click into this field and select or upload the asset to display when the user hovers over the image (i.e. “cookies-after.png”):
    
    
    
11. By default, the delay is set to 500ms. We've changed the Delay to 0ms for this example, as we want the image to change instantly:
    
    
    
12. Now we'll add a second Event, to set an image on Hover Off - which will return the image back to the default state on hover off (i.e. "cookies-before.png").
13. Click "Add Event" below your Event 1:
    
    
    
14. You'll see Event 2 has been added under your first event:
    
    
    
15. Now for Event 2, we will choose "Hover Off" for event Type, "Change Image" for the Action, and insert the original image (i.e. "cookies-before.png") into the Image Source field:
    
    
    
16. We've also set the delay on Event 2 to 0ms, to match the Event 1 delay.
    
    
    
17. Save, and click the Preview icon to view your ad.
18. Check out the finished unit within our Ad Formats Gallery: Hover to Bake Cookies

How to Set Fade Events on Images

1. In the example below, we'll be adding a Fade Event to an image asset. The image will fade in on hover over, and fade out on hover off.
2. Add and upload all assets to your canvas.
3. Select the image you'd like to add the fade event to, and you'll see the Event Properties displayed in the Properties panel on the bottom right side of the builder:
   
   
4. Click “Add Event”.
5. For the event Type, select "Hover Over", and for the Action select "Fade In".
6. Set your delay (animation transition time) in milliseconds. This is set to 500ms by default. Set to 0 for no delay.
   
   
   
   
7. Now we'll add a second Event, so the image fades out on Hover Off.
8. Click "Add Event" below your Event 1:
   
   
   
   
9. You'll see Event 2 has been added under your first event:
   
   
   
   
10. Now for Event 2, we will choose "Hover Off" for event Type, "Fade Out" for the Action.
    
    
    
    
11. Save, and click the Preview icon to view your ad.

How to Set Scale Events on Images

1. In the example below, we'll be adding a Scale Event to an image asset. The image will scale in on hover over, and scale out on hover off.
2. Add and upload all assets to your canvas.
3. Select the image you'd like to add the scale event to, and you'll see the Event Properties displayed in the Properties panel on the bottom right side of the builder:
   
   
   
   
4. Click “Add Event”.
5. For the event Type, select "Hover Over", and for the Action select "Scale".
6. Set the Scale percentage. By default, it is set to 100%. For this example, we will set it to 120%.
   
   * Note - If you'd like the image to scale smaller on hover over, set the percentage lower than 100%. If you'd like the image to scale larger on hover over, set the percentage above 100%.
   
   
7. Set your delay (animation transition time) in milliseconds. This is set to 500ms by default. Set to 0 for no delay.
   
   
   
   
8. Now we'll add a second Event, so the image scales back out on Hover Off.
9. Click "Add Event" above your Event 1:
   
   
   
   
10. You'll see Event 2 has been added under your first event:
    
    
    
    
11. Now for Event 2, we will choose "Hover Off" for event Type, "Scale" for the Action.
12. We'll then set the scale to 100% (default) to ensure the image scales back out to its' original size on hover off:
    
    
    
    
13. Save, and click the Preview icon to view your ad.