> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-settings/animations.md).

# Animations

{% hint style="info" %}
This setting is only available on **Minimog c3.5.0 onwards.** View [Changelog](/minimog-theme/changelog.md)
{% endhint %}

<figure><img src="/files/IiQpyVC7wZcwe9QWaHtT" alt=""><figcaption></figcaption></figure>

## How to enable page transition

{% hint style="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 **Save.**
   {% endhint %}

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

You can set the **Loading size** and **color** for the page transition icon.

<figure><img src="/files/ySIXMaNPstoaCusOXGFS" alt="" width="224"><figcaption></figcaption></figure>

<figure><img src="/files/jQa771sg95ssumkHCIpi" alt=""><figcaption></figcaption></figure>

You can also upload your own **Custom logo** for the page-loading effect.

{% hint style="info" %}
Custom logo is only available on Minimog v4.1.0 onwards. View [Changelog](/minimog-theme/changelog.md)
{% endhint %}

{% hint style="success" %}
Square-sized images are recommended.
{% endhint %}

<figure><img src="/files/ZSEQudPkxoKcKokjgZ0z" alt=""><figcaption></figcaption></figure>

## How to set up the page animation

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), click **Theme settings.**
2. Navigate to the **Visible in the view** section.
3. Select your **Animation** type and adjust the animation duration.
4. Click **Save**.
   {% endhint %}

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.

<figure><img src="/files/iPBMlKGFZdncr6SqPBGv" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="None" %}

<figure><img src="/files/QTKE9rBuvCUYKsGJmzRe" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fade in" %}

<figure><img src="/files/SJ5VdKQvlM3YKo64GrTn" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fade in up" %}

<figure><img src="/files/CLJdDSAz6RfhR8fprSWi" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fade in left" %}

<figure><img src="/files/EVok2hI4Ol2s4FrYaBj9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fade in right" %}

<figure><img src="/files/zwhqcd7v4VR6mZyYlFmC" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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;

<figure><img src="/files/qfR7Gx0kjfBs9nHHrDsT" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
**Most sections** come with animation settings.&#x20;

You can either set the section loading effect to each of the sections (if available) individually; or inherit the global settings that you set in your **Theme settings** > [**Animations**](broken://pages/SGDj3xqfmiaVH9ejAAMv).
{% endhint %}