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.
3From Viewport Animation, select one of the animations.
4Click Save changes and publish or update the page to check the result.
Beware! Since in this example, we only added one item, it’s good to disable the Site Preloader.
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.
