You can animate any element within the Multi-Touch AdBuilder to add dimension to your standard static creative.
In this article, you'll learn how to:
✅ Triggering an Animation
✅ Selecting your Animation Type
To kickoff, add an animation to any element by selecting the element and selecting the lightning bolt icon at the top right of the Attribution Panel.
Animation Triggers
The animation trigger allows you to define what should trigger an animation on this element. Choose from the following action trigger types.
Load: The animation will begin when the ad first loads.
Click: The animation will begin when a user clicks on the ad.
Hover On: The animation will begin when a user hovers over the ad.
Hover Off: The animation will begin when a user hovers off of the ad.
Animation Types
The animation type will define how the element is animated after the trigger is initiated. The animation types include the following.
Fade-In: This animation will start the element from an invisible state and gradually fade it into visibility from the time the event is triggered.
Fade-Out: This animation will start the element from a visible state and gradually fade it from view once the event is triggered.
Slide-In: This animation will start the element outside of the frame and slide it into visibility from the time the event is triggered.
Slide-Out: This animation will start the element from a visible state inside the frame and gradually slide it out of the frame once the event is triggered.
Show: This animation will start the element from an invisible state and immediately bring it into view from the time it is triggered.
Hide: This animation will start the element from a visible state and immediately remove it from view once the event is triggered.
Slide: This animation will start the element from its initial position and slide it to a specified endpoint within view.
Pulse: This animation will fade the element in and out of view sequentially.
Scale: This animation will scale the element to the current size. A scale value > 100% will make it grow, and a value < 100% will make it shrink.
After defining the animation type, you can define its attributes, including duration, animation easing, direction, and sizing. Once complete, select done.
🧠 Pro tip: Once complete, don't forget to preview your changes by selecting the eye icon to enter Preview Mode.
Related Articles