Animations

What are Animations and how there works in Massive Addons?

Animations inside Massive Addons are devided into two groups: Enter Animations and Loop Animations. Almost all of our shortcodes as well as Columns and Rows contain Enter Animations. Some shortcodes are available to use in connection with Loop Animations.

Enter Animations are triggered when an element is entering into browser viewport. Check the section below to see an available configuration options.

Loop Animations are triggered after Enter Animations. They run in an endless loop until you close the browser window. Those animations can be also paused on mouseover.

fields-animation

Technical Note: All animations used in Massive Addons are powered with velocity.js library.

How to use Enter Animations?

Please go to shortcode, column or row edition and select Animations tab inside Visual Composer popup. List of available options:

  • Type – choose on of the animation types.
  • Offset – choose the point on the viewport that should trigger the animation. For example:
    100%: animation will start as soon as the top of the shortcodes appear in the viewport
    50%: animation will start when the top of the shortcode is in the middle of viewport.
  • Duration – choose the duration for animation effect.
  • Delay – choose delay for the animation. Useful for creating a cascade effect on set of similar shortcodes (buttons, icons, etc.)

Good to know: You can apply the animation to the preview box on the right with the ‘Refresh‘ button.

How to use Loop Animations?

Please go to shortcode, column or row edition and select Animations tab inside Visual Composer popup. List of available options:

  • Type – choose on of the animation types.
  • Duration – choose the duration for animation effect.
  • Delay – choose delay for the animation. After the delay the animation will start again.
  • Pause on Hover – check to pause loop animation when user hovers over the shortcode.

Good to know: Please notice that Loop Animations are available only in selected shortcodes.

Good to know: You can apply the animation to the preview box on the right with the ‘Refresh‘ button. Please notice that the preview button will be animated only once without a loop effect due to performance and usability reasons.

Video Tutorial

Please check the video tutorial showed below for better reference.

Leave A Comment?