Tools: Animations

The "ANIMATION" function enables you to add custom, editable animations to enrich and enhance your ad build. Animations are a great way to draw attention to your ads. This article will walk you through adding animations to your creatives.  

Clicking on the animation icon will bring up the "Animations" editor screen within the builder: 

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. NOTE: You can have multiple animations on a single object/layer.

WATCH VIDEO

(shown with previous builder icons)

From inside the Ad Builder, click on any element you want to animate.

With your asset selected, go to the Tools Panel and click the bolt icon  to open the animations editor.

 

 

Select an animation

Fade, slide, rotate, scale or parallax scroll.

 

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.

 

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 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.

**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)  Separate Article here

Fashion Example

Mobile Example

 

WATCH VIDEO

First, 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.

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:

 

Upload your assets to the canvas via the landscape icon .

In this example, we uploaded 3 assets which you can see at the bottom left of the screen in the builder:

Apply the Parallax Scroll animation to each asset that you want to animate by following the below instructions:

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):

In the above example, our canvas is sized 970px x 250px and is blue.  We selected the “Bubbies” asset and put it below the canvas for now as we plan to have it parallax scroll Up and over the bottle.

Next, click on the name of asset layer at the bottom of the screen that you would like to animate (in this example, we will chose “bubbies.png”:

 

Next, click on the icon  to the left of the builder and the “Animations” screen will appear:

Click on the arrow in the first field (next to the default “slide”) and choose Parallax Scroll:

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

Scroll Speed – how fast your image will move.

 

Direction – choose the image to move either up, down, left or right.

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

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).

In this example, we will choose “bubbies.png” and set the parallax scroll animation as below and hit “Apply”:

 

 

We didn’t set a “Pin to Y Axis” as we don’t want the bubbles to stop scrolling/animating.

Be sure to save your ad along the way - you can Preview  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:

 

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

 

Make any necessary changes and click “Apply”. 

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” asset.

Select the “logo-970x90” 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).

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 in your General Properties (it is at -27 Y axis – this is what we will enter in the Parallax Scroll animation):

 

Now place the logo back to where you want it to start.  Then with the “logo-970x90” layer selected, click on the icon  to the left of the builder and the “Animations” screen will appear for you to choose Parallax Scroll from the dropdown and set all the parameters as listed above:

 

 

For this animation we will select a Scroll Speed of 130% (this is just an estimate – you need to preview the ad to see how fast and 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 will Pin to Y Axis for this animation as we want the logo to stop on the canvas (we are selecting -27 as this is where we determined previously is where we want it to stop on the canvas).  Click Apply.

Be sure to save your ad along the way - you can Preview  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:

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

 

Make any necessary changes and click “Apply”. 

To see everything applied to all assets – click on the 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:

 

*  Once saved - 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 and make the updates and Save.  Repeat as necessary. 

 

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).

 

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

 

 

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.      

 

Previewing + Editing Animations

To preview your animation you can click the 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.

You can easily adjust the length of your animation by clicking and dragging the white markers in your animations timeline. 

 

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

Click Delete to remove the animation. Note: This does not delete the layer only the animation effect.

Select Edit to change animation settings or Delete to delete the animation. Note: This does not delete the layer only the animation effect.

This will open a popup window where you can edit the animation. Changes are automatically saved when you click outside the popup window.