Animation Builder is a quite large and advanced part of the Vertical Menu, that's why it gets a unique tab in the module manager. Although there are predefined animations for the different navigation types and menu positionings, you can customize the settings in details, to create your custom one, or even just change the originals.

Sidebar animation parameter means that which animation will used for menu opening effect. This parameter is available with Sidebar navigation type and with Module position even if you have also set the Force menu to sidebar under option. You can select from 14 predefined animations. All of them work on mobile devices. Click the button below to check the effects on the demo site.

Sidebar animations - DEMO

Slide transition preset parameter related to the effects between changing the menu-levels. Here you can also select from the predefined list, and set the Duration value. If you have menu icons you can also animate them with the Animate icons parameter.

By enabling the Advanced settings parameter, you can customize the slide transitions. You can define different values for in and out animation, and also can set menu-item animations. This is recommended for advanced users, but everybody can play with it, because by select from the predefined list all settings will reset.

And now let's see the most exciting part, the advanced settings. As you can see there is a part for the in and one for the out animation. The parameters are the same in both cases, so we will introduce them once.

Perspective property defines how many pixels a 3D element is placed from the view. Zero value means that there won't be perspective set.

Ease parameter specifies the speed curve of the transition effect. With this parameter you can click on the ? character, which will load the following page, where you can select from the easigns, and you can visualise the selected one on a live graph: GreenSock RoughEase site

Transform Origin parameter allows you to change the position of transformed elements. It has 3 value, which refers for the X, Y and Z axis. You can learn more on the following link, with examples: Transform origin.

• Next >