Animating Components in Ad Studio
Purpose
This article describes how to use Animate mode in Ad Studio to add animations to your creative components and preview them using the timeline.
Using Animate mode
Animate mode allows animating Ad Studio components. Add animations to your components and preview them using the timeline at the bottom of the page.
Adding animations
-
After building your creative, select the Animate icon.
For more information, see Building Creatives in Ad Studio.
-
Select the page and element you want to animate, and then select Add Animation in the Properties.
-
Select the Trigger from the dropdown.
This is the instance or interaction that will trigger the animation to begin. Options include:
- On-Screen Load: Animation begins as the page loads.
- After Previous: Animation begins after the previous animation ends.
- With Previous: Animation begins concurrently with the previous animation.
- On Click: Animation begins when a user selects the component. The Component field is displayed. Select the component that the user needs to select to trigger the animation. It is set to "self" by default.
-
Select the animation effect. The available effects are:
Effect Effect Slide-In Scale Up Slide Out Scale Down Move Zoom Rotate Appear Flip Disappear Note: After selecting an animation effect, additional options are displayed, for example, easing, duration, repeat, and delay.
- Optionally, select + Add New Effect to add another effect to the animation.
- When ready, you can preview with the timeline and see what your concept looks like.
Changing animation order
The correct order of animations is important to manage triggers.
In the screenshot below, the first animation is Background_Image, followed by Logo, then CTA, and so on. Re-order animations by dragging them to the correct position.
Adding effects to many components
You can quickly add the same animation to multiple components at once:
- Select the elements in the screen navigation panel, or on the canvas, while holding the Shift key on your keyboard.
- Select Add Animation and then set up the animation as usual.
Editing animation settings
Select the Edit icon to view the Animation Properties.
Settings available to alter include:
- Animation Loop
- Loop Delay
- On-Screen Load Trigger
- Screen Navigation
The Screen Navigation section allows transitioning to a different page after the animation completes. Use the toggle to switch the feature on if required for the animation.
Note: It is best practice to implement all related animations and all animations that share the same layout on a single page. Transitioning to a different page is useful when the next page contains an entirely separate animation that doesn't share the same layout (or when it contains a different part of the ad, like a coupon page or a video).
You will then be prompted to select the page to launch, transition, and transition settings.
Preview with the timeline
After adding animations, you can preview them in the Studio by selecting the Play icon at the bottom of the Studio.
Playback controls
You can play animations using the Play button and use Pause, Rewind, and Fast Forward actions.
Slider
You can also control the preview visually by taking actions on the timeline:
- Drag the slider to preview sections of animations at the required speed.
- Drag and drop the slider or select the relevant spot within the timeline to preview or play from a specific moment within the animation.
- Visual operations (like dragging or selecting on the preview scrubber) snap the scrubber to a time tick. This depends on the zoom level and is 0.2s at the default. You can also enter a required time value manually (down to a millisecond) to preview or play from a specific frame.
Zoom in and out
Use the slider to zoom in or out on the timeline. This allows you to focus on very specific points in time on your creative.
You can zoom in on the timeline for convenience when focusing on a specific section of the animation. You can also zoom out to view a longer animation in its entirety.