Tools: Animations

The "ANIMATION" function enables you to add custom, editable animations to enrich and enhance your ad build. 

HubSpot Video

 

Resources:

Explore our Ad Gallery for examples of this tool

 

In this article, you will learn:

How to Fade In or Out

How to make your object Rotate

How to Scale the size of your object

How to Slide your object from point A to point B

How to create a Parallax Scroll with your object

How to Preview and Edit your animations

 

This article will walk you through adding animations to your creatives.  

Animation functions include Slide, Fade, Rotate, Scale, and Parallax Scroll. These features are intended to add a more rich media experience to an otherwise static or immobile ad.

How to add the Animations tool

  1. Choose the ad format and dimensions of the ad unit you wish to add animations to.
  2. From inside the Ad Builder, click on any element you want to animate.
  3. With your asset selected, go to the Tools Panel and click on the Animations icon KB-Animations-Icon to open the Animations editor screen within the builder.

    KB-Animations-Window
  4. Select the type an Animation from the dropdown menu: Fade, slide, rotate, scale or parallax scroll.
  5. Set Easing effects (optional).

    Easing functions specify the speed at which an animation progresses at different points within the animation, making animations appear more natural.

NOTE: You can have multiple animations on a single object/layer. See video below:

WATCH VIDEO

Animation Types

 

Fade : Fade your object in or out

Start value: Set object opacity to start. 100% = fully visible

End value: Set object opacity to end. 0% = transparent

Start time: Time, in seconds, to initiate animation

End Time: Time, in seconds, to complete animation

Loop: Select to loop infinitely.

Play on View:  selecting this option will trigger the animation to start when the ad becomes visible/enters the viewable area (vs. on page load).  (If the ad is only 50% or less visible, the animation will not show if this is selected).  

Click Apply to save your animation.

 

Rotate: Make your object rotate

Start value: Set rotation degree (0-360˚) position to start.

End value: Set rotation degree (0-360˚) to end.

Start time: Time, in seconds, to initiate animation

End Time: Time, in seconds, to complete animation

Loop: Select to loop infinitely.

Play on View:  selecting this option will trigger the animation to start when the ad becomes visible/enters the viewable area (vs. on page load).  (If the ad is only 50% or less visible, the animation will not show if this is selected).  

Click Apply to save your animation.

 

Scale: Increase or decrease the size of your object

Start value: Set object size to start. 0-1000%

End value: Set object opacity to end. 0-1000%

Start time: Time, in seconds, to initiate animation

End Time: Time, in seconds, to complete animation

Loop: Select to loop infinitely. 

Play on View:  selecting this option will trigger the animation to start when the ad becomes visible/enters the viewable area (vs. on page load).  (If the ad is only 50% or less visible, the animation will not show if this is selected).  

Click Apply to save your animation.

 

Slide: Set your object to move from point A to point B.

Move to: enter x and y coordinates

Note: 0,0 would be the upper left-hand corner of your ad canvas. You can also move objects in from off screen by using a negative value.

Start time: Time, in seconds, to initiate animation

End Time: Time, in seconds, to complete animation

Loop: Select to loop infinitely. 

Play on View:  selecting this option will trigger the animation to start when the ad becomes visible/enters the viewable area (vs. on page load).  (If the ad is only 50% or less visible, the animation will not show if this is selected).  

Click Apply to save your animation.

 

Parallax Scroll

  • Parallax units vary greatly depending on the site, and where they are to be placed on the site (where the container is set up), so be sure to contact support@adventive.com to test prior to your first campaign.  Also applies to site re-design or if different sections of your site are set up differently - please contact us to test before going live with a campaign.
  • Check out our article Parallax Scroll for more information.
  • * Trigger points will depend on where the placement will run on the site (discussed below in article) - you should have a container placed where you want the parallax to display prior to testing (i.e. mid-article, etc.).  You should also have a test page (with the container set up) to traffic to so you can go back into the build and adjust the scroll speed or parallax trigger point as needed.  

Desktop Example (Smartwater)

Desktop Example 2 (ADV)

Desktop Example 3 (Background Parallaxing w Video) 

Desktop Example 4 (Cappadocia) Separate Article here

Fashion Example

Mobile Example

 

WATCH VIDEO

The above video showcases the below step-by-step process of adding Parallax Scroll animations to your ad unit. In this example, we are creating a double Parallax Scroll, using San Pellegrino imagery.

  1. Prepare your assets.  Each image you want to animate/scroll should be its own .png or .jpg file, etc.  You will be putting an animation on each one to scroll, so you should separate each from the background image.
  2. Open the builder and create a New File – choose “Banner” as the Format and put in the canvas dimensions and a backup image/click url:

    KB-Animations-New-Ad-Screen

  3. Upload your assets to the canvas via the landscape icon KB-Animaitons-assets-landscape-icon. In this example, we uploaded 3 assets which you can see at the bottom left of the screen in the builder:

    KB-Animations-Layers

  4. Set the first asset you would like to animate OFF the canvas (you may want to zoom out using the zoom bar in the bottom right of the screen).  Either set it above the canvas if you plan for it to scroll down, or set it below the canvas if you plan for it to scroll up (left and right is also available):

    KB-Animations-Bubbles-Off-Canvas

  5. In the above example, our canvas is sized to 970px x 250px, and we've set the background Fill Color to blue. We selected the “bubbles.png” asset, and placed it below the canvas for now, as we plan to have it parallax scroll Up and over the bottle.
  6. Click on the name of asset layer at the bottom of the screen that you would like to animate (in this example, we chose the “bubbles.png”):

    KB-Animations-Bubbles-Layers

  7. Click on the Animations icon KB-Animations-Icon to the left of the builder, and the Animations screen will appear:
     KB-Animations-Window

  8. Select Parallax Scroll from the "Animation" dropdown menu:

    KB-Animations-Window-Parallax-Scroll

  9. Once selected, you can change the Scroll Speed, Direction, Pin to Y Axis, and Custom Trigger point.

    KB-Animations-Animations-Panel-ParallaxScroll

  10. Scroll Speed – Choose how fast your image will move.

    KB-Animations-Window-Scroll-Speed
     
  11. Direction – Choose which direction the image will move: Up, down, left or right.

    KB-Animations-Window-Scroll-Direction

  12. Pin to Y Axis – Select this to pin the selected image to a Y Axis point on the canvas. This is where your image will stop scrolling.  Or you can choose to not select this.

    KB-Animations-Window-PintoYAxis

  13. Custom Trigger – If left unchecked, the default will set the trigger point (start of animation) at 90% from the top of the page OR the top of the ad container (whichever is higher).  The trigger point will display on the preview page for you to check however, it is recommended to test on live page.  For help identifying or troubleshooting site/trigger point settings, please contact support@adventive.com

    If you select the Custom Trigger, you can set the page position in percentage or pixels.  i.e. if you plan to run this ad 30% from the top of your site, you can set this as the custom trigger point and it will show the start and end points where the animations happen in preview according to your settings.
    NOTE:  If you select the Custom Trigger point for just one animation, it will set the same trigger point for the rest of your animations (unless you define each one).

    KB-Animations-Window-CustomTrigger

  14. In this example, we chose the “bubbles.png”, selected Parallax Scroll, and set the Scroll Speed to 120% (this is just an estimate – you will need to preview the ad to see how fast the image moves, and to make adjustments according to your customer’s feedback).  We also set the direction to “Up”, as we want the "bubbles.png" image to scroll up. We didn’t set a “Pin to Y Axis”, as we don’t want the bubbles to stop scrolling/animating. Once your settings are selected, hit "Add".

    KB-Animations-Window-Bubbies-Settings

  15. Be sure to save your ad along the way - you can Preview KB-Animations-Eyeball the ad to test at any point.  If you want to edit the Parallax Scroll animation, go to the bottom of the builder, select the asset, and right click on the red bar showing the animation:

    KB-Animations-Bubbles-Layers-Edit

  16.  When you click on “Edit”, the following screen will appear:

    KB-Animations-Animations-Panel-Edit-Bubbies

  17. Make any necessary changes and click “Apply”. 
  18. Go to the next image you would like to animate and follow the same steps as above.  For this example, we will apply the Parallax Scroll animation to the “logo-970x90.png” asset.
  19. Select the “logo-970x90.png” asset and position it Above the blue canvas for now, as we plan to have it parallax scroll down.  We also want it to stop on the canvas (to not keep scrolling down and off the canvas), so we will select "Pin to Y Axis" for this asset.

    KB-Animations-Animations-logo-970x90

  20. To figure out the “Pin to Y Axis”, place the asset on the canvas where you want it to end up and look at the Y axis it is placed at within your General Properties Panel (it is at -1 Y axis, and this is what we will enter in the Parallax Scroll Animations screen):

    KB-Animations-logo-970x90-On-Canvas
    KB-Animations-Animations-PintoYAxis-XYCoordinates

  21. Now place the logo back to where you want it to start, above the canvas.  Then, with the “logo-970x90.png” layer selected, click on the icon KB-Animations-Icon to the left of the builder and the “Animations” screen will appear. Choose Parallax Scroll from the dropdown, and set all the parameters as listed above.
  22. For this animation we selected a Scroll Speed of 130% (this is just an estimate – you need to preview the ad to see how fast the image moves, and to make adjustments according to your customer’s feedback).  We will also set the direction to “Down” as we want the logo to scroll down.  

    We also selected "Pin to Y Axis" for this animation, as we want the logo to stop on the canvas. We have set this asset to pin to -1 Y Axis, as this is where we had determined previously that we want the image to stop on the canvas.  Click "Add":

    KB-Animations-Animations-logo-970x90-Settings

  23. Be sure to save your ad along the way - you can Preview KB-Animations-Eyeball the ad to test at any point.  If you want to edit the Parallax Scroll animation, go to the bottom of the builder, select the asset, and right click on the red bar showing the animation:

    KB-Animationa-logo-970x90-Layers-Edit

  24. When you click on “Edit”, the following screen will appear:

    KB-Animations-Animations-Panel-Edit-logo-970x90

  25. Make any necessary changes and click “Apply”.
  26. To see everything applied to all assets – click on the bar icon KB-Animations-Animations-Bar_Icon at the bottom of the builder and drag it up.  In this example, you should now see all the assets and their animations listed next to them:

    KB-Animations-All-Layers-Animated

  27.  Objects/layers that have animations applied are indicated with a star icon in the screens and layers panel at the bottom of the Builder.

    KB-Animations-Layers-Star-Icons

*  Once saved (and republished within the campaign), you should refresh your test site to see the changes applied. 

If more edits are necessary, go back into the ad, right click on the parallax animation, make the updates, click "Apply", and save and republish.  Repeat as necessary.

To learn more about republishing updated ad units within a campaign, see our article Updating Inflight Campaigns.

 

NOTE: You can also have multiple animations on an object. For example, you can have an image scale in on ad load, and then fade out after two seconds.  (Set an animation on the layer/asset.  When finished, repeat - select the layer/asset again and then the animation button and make your selection. Repeat to add multiple animations on one layer/asset). See video below:

WATCH VIDEO

 

Previewing + Editing Animations

You are also able to loop or replay an entire animation sequence, including all animations applied to layers, on your ad screen. Looping and replay options are located just above the animations timeline. Select Loop to set your animation sequence to play infinitely or 1x, 2x, or 3x times.   

In the below example, we've added a Fade animation to the "logo-970x90.png" layer, along with the previously added Parallax Scroll.

KB-Animations-Layers-Multiple-Animations-Fade

To preview your animation you can click the play button KB-Animations-Play-Button at the top of the timeline, or drag the red scrubber to manually view your animation. You can also view the animation in the ad preview. KB-Animations-Eyeball You can also easily adjust the length of your animation by clicking and dragging the white markers in your animations timeline:

KB-Animations-Play

 

To edit or delete an animation, right click on the animation bar in the timeline. 

Note: This does not delete the layer, only the animation effect applied to it.

KB-Animations-Play-Edit

 

Selecting "Edit" will open the popup window where you can edit the animation.  Make necessary changes and hit "Apply". Changes are also automatically saved when you click outside the popup window. 

KB-Animations-Play-Edit-Panel