# Animations

{% hint style="info" %}
This setting is only available on **Minimog c3.5.0 onwards.** View [changelog](https://docs.foxecom.com/minimog-theme/changelog "mention")
{% endhint %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fn7bFwkAxVj8sBjTKRey4%2Fimage.png?alt=media&#x26;token=c2614467-e989-4df9-9cae-91d18bd04708" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FhZGjF5rLAMDwnirRI3Uz%2Fimage.png?alt=media&#x26;token=0379648b-b8ac-4140-a09d-dc8d08f78f20" alt="" width="224"><figcaption></figcaption></figure>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FqWgbj1YswPFTzxa7tYN1%2Fezgif.com-video-to-gif%20(21).gif?alt=media&#x26;token=b03ca50a-2d10-484f-8275-bc769d90ba0a" 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](https://docs.foxecom.com/minimog-theme/changelog "mention")
{% endhint %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FlJLSXpEKqh7byyOqq20M%2Fimage.png?alt=media&#x26;token=1373d70f-9804-4439-8625-d78fbe20cd2d" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fm8NLcCdKXAdrK48VnMh2%2Fimage.png?alt=media&#x26;token=272612f7-42b0-411d-828f-9aa48ccd9071" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F9nsB0k6LJ33KpzfT71ST%2Fezgif.com-video-to-gif%20(22).gif?alt=media&#x26;token=e829cc36-21e3-45ba-b3f0-52cab1d69111" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fade in" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FMJRscyijduQfsXIEGmrU%2Fezgif.com-video-to-gif%20(23).gif?alt=media&#x26;token=ffff85c1-3fec-4b6e-b103-1805d14c53b7" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FB8RYgGFmiSmflfvW5qdT%2Fezgif.com-video-to-gif%20(24).gif?alt=media&#x26;token=e4956f59-684d-47ba-bb56-fe518c4bef9b" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FTicyJkkujI77mAEQaGUb%2Fezgif.com-video-to-gif%20(25).gif?alt=media&#x26;token=884eed37-c10b-4211-9d0b-0e9de6b6d27a" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FDoJpEg30li4vOTMiRPhD%2Fezgif.com-video-to-gif%20(29).gif?alt=media&#x26;token=e031ae8e-5dbd-454f-9555-67c343ec0c02" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FDlIZlTpAIgKBv0x6OGTF%2Fimage.png?alt=media&#x26;token=e7a64c44-d60d-4a24-9a2e-54571ea6d72d" 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**](https://docs.foxecom.com/minimog-theme/theme-settings/broken-reference).
{% endhint %}