# Animations

{% embed url="<https://youtu.be/vJ1r-dtsMBo>" %}

Make your content pop with stunning visual effects. Add animations, hover effects, and click effects to specific elements for an engaging and dynamic user experience.

After selecting an element or section, select the type of animation you want to apply to it.

## Animation type

FoxStudio offers 4 animation types, based on when you want them to appear.

### Page load animation

An animation starts the moment your page loads.

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

### Entrance animation

An entrance animation appears when the element first enters into view, instantly grabbing attention.

&#x20;

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

### Hover animation

Hover animation is triggered when visitors hover over an element.

<figure><img src="/files/79gVoyCWMxFsRg8cOTdd" alt=""><figcaption></figcaption></figure>

### Click animation

Click animation is triggered when visitors click an element.

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

## How to add an animation

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

1. Click on the element or section you want to add an animation to.
2. In the I**nspector** panel, select the **Animations** tab and choose the animation type.
3. Customize the settings for the animation like duration, delay, and iteration (optional).
4. **Save** the changes.
   {% endhint %}

{% hint style="info" %}
The element having an animation setup can be easily distinguished with a lightning bolt icon ![](/files/LZ75cHmRZO8onVICcl5p)next to it in the Layers panel.

![](/files/AtCIAIP38GoSJzGNy8Ic)
{% endhint %}

## How to customize an animation

After choosing an animation, set it up to behave how you want. Manage the timing, duration and whether you want it to be repeated, then preview the final result directly from the editor.

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

1. Click on the relevant element or section.
2. In the I**nspector** panel > **Animations** tab, click the animation type you want to change.
3. Change its settings:

* **Duration:** Set the length of time the animation takes to complete.
* **Delay**: Change the delay for the start of the animation.
* **Iteration**: Set the number of times an animation is played. The default value is 1.
  {% endhint %}

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

<figure><img src="/files/0bdw0mgbuNiMETQCd3xb" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.