Divi Animations

Divi comes with Animations that you can use in their build-in modules, columns, rows and sections. As you can imagine, these animations are executed by Divi, not by our code. Later, we will introduce custom effects, which are executed by DiviMenus.

DiviMenus added Divi animations so you can animate the DiviMenu. You can find the Animation toggle in the far bottom of the Design tab.

If you are using the Show Link Type to show a Divi element, you can animate that element (you can do it as usual: by entering its Settings modal and going to the Design tab). This way, when you show an element, an animation is executed when it appears.

In the same way, if you are using either the Popup Link Type or the Sub Link Type, you can add animate the popup or the sub element (dropdown menu). Since you are using a Divi Layout with Divi elements, you can add animations to those Divi Elements.

As a result, we can easily add built-in Divi animations to the DiviMenu itself, popups, dropdowns, etc.

Custom Effects

Divi Animations can only be used when the element enters into the screen. That is, when the visibility changes from hidden to visible. However, they can’t be used the other way around. As a result, you cannot animate an element when disappearing.

Likewise, if you have selected the Sub Link Type to display WordPress menus, Divi animations can’t be used at all.

Due to these limitations, DiviMenus introduces custom effects in order to add further options and possibilities when it comes to animations.

If you have selected either the Popup Link Type, the Show Link Type or the Sub Link Type, a new toggle called Link will appear in the Design Tab with new fields. These fields will allow you to add custom effects (fade and slide animations) to the element.

Depending on the Link Type you have selected, the element can be either a popup, a page element or a sub element (dropdown menu/mega menu).

Let’s go over and explain all these custom effects fields.

Design Tab > Link > Enter Effect

This field allow you to animate the element when it appears.

Default is none (no effects).

This effect will override any Divi animations you set to the element, so if you want to keep the Divi animation, do not enter a custom effect here.

Design Tab > Link > Exit Effect

This field will allow you to animate the popup, element or dropdown when it disappears.

Default is none (no effects).

Design Tab > Link > Duration (ms)

Here you can determine how long the effect should run. You must enter a value in milliseconds. Higher values indicate slower effects.

Default is 1000ms (one second).

Resources

🎬 VIDEO: Creating Animated Sliding Tabs