Configuring Shortcode’s Entrance Animation

Last Updated on

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.

In this article


Enabling Entrance Animation

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

entrance animation

3
From Viewport Animation, select one of the animations.

Configuring shortcode's entrance animation - viewport animation

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

 

x
Beware! Since in this example, we only added one item, it’s good to disable the Site Preloader.

Altering Animation Speed

1
Click Edit Icon Box to open the Icon Box Settings pop-up.
2
From Extra Class Name, add my-icon-box-animation-duration class.
3
Click Save changes.
4
Click 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;
}

5
Click Save changes and publish or update the page to check the result.
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket