# Animation

## How to enable page transition

<Hint type="success">

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.**

</Hint>

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

![image](https://docs-assets.foxecom.app/megamog-theme/Animation_8zCi1usc.gif)

## How to set your page animation

<Hint type="success">

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**.

</Hint>

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.

![image](https://docs-assets.foxecom.app/megamog-theme/image_iPBMlKGF.png)

<Tabs>
<Tab title="None">

![image](https://docs-assets.foxecom.app/megamog-theme/Animation%20(6)_O4Kjm0UT.gif)

</Tab>

<Tab title="Fade in">

![image](https://docs-assets.foxecom.app/megamog-theme/Animation%20(7)_VdjcAF5f.gif)

</Tab>

<Tab title="Fade in up">

![image](https://docs-assets.foxecom.app/megamog-theme/Animation%20(8)_Gt43Clt5.gif)

</Tab>

<Tab title="Fade in left">

![image](https://docs-assets.foxecom.app/megamog-theme/Animation%20(9)_ukaWvWuy.gif)

</Tab>

<Tab title="Fade in right">

![image](https://docs-assets.foxecom.app/megamog-theme/Animation%20(10)_D5OoaBPJ.gif)

</Tab>
</Tabs>

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.&#x20;

![image](https://docs-assets.foxecom.app/megamog-theme/image_KcjEUS7Q.png)

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

<Hint type="info">

**Most sections** come with a setting for animations.&#x20;

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.**

</Hint>