How To Use The Element Animation Options

Last Update: February 13, 2023

Element Animation Options control how the Element loads on the page. They can be found under the Extras Tab, and are available on many of the Design and Layout Section Elements. Please read below how to use them, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Extras Tab Animation Options

Animation Type – This controls the column’s animation type. This animates the chosen Element as the page loads. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, Light Speed or Reveal With Color.
Direction of Animation – This controls the direction of the animation on the chosen Element. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – This controls the speed of the animation on the chosen Element. Choose between 0.1 to 5. This is in seconds.
Animation Delay – Select the delay time after the animation starts (0 – 5).
Offset of Animation – With this option, you can configure exactly when the animation will start. Without this, many animations would run before the content was in the viewport. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

The image below shows the Alert Element Extras Tab, and is set to animate on load. The specific settings for this image are Type – Slide, Direction of Animation – Right, Speed of Animation – 0.5, Animation Delay – 0, and Offset of Animation – Top of Element Hits Middle Of Viewport. Reload the page to watch the animation again.

Global Animation Options

There are also two global options relating to Element Animations, as seen below. These are found in Avada > Options > Avada Builder Elements > Animations, and here you can control the default Animation Offset, and whether animations are enabled on Desktop Only, Desktop & Mobile, or are turned off entirely.