Animation

A guide to add animations your page

How to enable page transition

Steps:

1. In the theme editor (Customize), click Theme settings.

2. Navigate to the Animations section.

3. Click the checkbox Enable page transition.

4. Click Enable page transition.

5. Click Save.

The Page transition displays a loading spinner while a page is loading. It enhances the user experience and augments the interest of web visitors.

How to set your page animation

Steps:

1. In the theme editor (Customize), click Theme settings.

2. Navigate to the Animations section.

3. Select your Animation type and adjust the animation duration.

4. Click Save.

As readers scroll up and down the site, the animation, when enabled, is triggered once the element comes into view. A little bit of animation in the loading process can add some flair, impress users, and get their attention.

None

Fade in

Fade in up

Fade in left

Fade in right

You can also set a Duration for the Animation. The animation duration is the length of time that an animation takes to complete one cycle.

Simply tweak the toggle. The time can be set between 0.1s-1s.

Most sections come with a setting for animations.

You can either set the section loading effect to each of the sections (if present) particularly or make them inherit the global settings that you set in your Theme settings.