> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-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/zest-theme/theme-settings/animations.md).

# Animations

{% hint style="info" %}
🌟 Settings for Animations are available on **Zest version 6.0.0 and above** 🌟 

View Changelog [here](https://help.foxecom.com/changelog/zest).
{% endhint %}

<figure><img src="/files/1wcU3kBgmXcYcf4Y7gJI" 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 **Enable page transition**.
5. 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.

<figure><img src="/files/2cWwiEW5ivtsXIGSMJCL" alt=""><figcaption></figcaption></figure>

## How to set your page animation

{% hint style="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**.
   {% 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/TWXG3weiXbqdGF3L52P3" alt=""><figcaption></figcaption></figure>

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

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

{% tab title="Fade in" %}

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

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

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

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

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

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

<figure><img src="/files/jpD7IaV6gq6ZjYXiqseY" 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;

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

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