Add animations on rows, columns and modules

In the Editor, you can add animations to any element on your website. Animated entrances can be used to create a more engaging design or help focus the visitor's attention on a specific element that you want to stand out.

 

How to add an animation

Hover on any row, column or module label and find the Add animation option on the dropdown.

add-animation2.png

Click one of the animation types (see examples below) to add it to your element. Once added, the Editor triggers the animation once to show you what it looks like.

 

Types of animations

When adding an animation, you can select from the following types:

Fade in

Fade_In.gif

 

Fade in left

Fade_In_Left.gif

 

Fade in right

Fade_In_Right.gif

 

Fade in up

Fade_In_Up.gif

 

Zoom in

Zoom_In.gif

 

Flip in

Flip_In.gif

 

Bounce in 

Bounce_In.gif

 

Set animation speed and delay

If you wish to add a bit of customization to your animations, you can do so by adjusting speed and delay. Find these options on any row, column or module in the Design menu > Animation.

custom-ani.png  

Animation speed defines how fast (in milliseconds) you want the animation to play from the moment it starts until it ends. By default, all animations are set with a speed of 800 milliseconds (0.8 seconds).

By setting an Animation delay, you can define a "gap" between the visitor viewing the element in their browser and the animation starting. By default, the delay is set to 0 milliseconds on all animations, meaning that they play instantly when the visitor views the element.

Was this article helpful?
0 out of 0 found this helpful