Configuring Shortcode’s Entrance Animation

Updated on November 20, 2017

Entrance animation adds a unique visual aesthetic feature to your page. In simple terms, when this setting is enabled for shortcodes, they appear in the page with animation on scroll.

Entrance animation setting is available in most of the shortcodes which you can enable in two steps. These steps includes editing shortcode’s settings then selecting one of the animations from Viewport Animation setting. In this article, we choose Icon Box shortcode and explain the process from scratch.


Enabling Entrance Animation

1Add an icon box shortcode to your page.
2Click Edit Icon Box to open the Icon Box Settings pop-up.

entrance animation

3From Viewport Animation, select one of the animations.

Configuring shortcode's entrance animation - viewport animation

4Click Save changes and publish or update the page to check the result.

 


Altering Animation Speed

1Click Edit Icon Box to open the Icon Box Settings pop-up.
2From Extra Class Name, add my-icon-box-animation-duration class.
3Click Save changes.
4Click Cog icon to open page settings and copy and paste below codes there. In below codes, you may change the 3s to alter the speed.

.my-icon-box-animation-duration.mk-animate-element.mk-in-viewport {
animation-duration: 3s !important;
}

5Click Save changes and publish or update the page to check the result.
Did this answer your question?