How To Use The Element Animation Options

12/02/2020

The Extras Tab is available on 16 Elements to date, and animations can also be found on 2 Child Elements as well. The Extras tab contains Animation options, which control the way the Element interacts with the page on load. Currently, the following Elements have this tab:

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

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, or Zoom.

  • 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 1. This is in seconds.

  • 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 Slide, Right, 0.5, and Top of Element Hits Middle Of Viewport.

Alert Element > Extras Tab

Global Animation Options

There are also two global options relating to Element Animations, as seen below. These are found in the Theme Options > Fusion 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.

Element Animation Global Options