# Animate a Unit

## Create a Simple Animation

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

{% stepper %}
{% step %}
Select a unit and go to the **Animation** tab.
{% endstep %}

{% step %}
Select condition for starting animation from the drop-down menu:

* None;
* In view;
* Hover;
* Constant;
* Tap.
  {% endstep %}

{% step %}
Click on the icon to select an animation type.

The settings will be saved automatically.
{% endstep %}
{% endstepper %}

## Create a Step-by-step Animation

{% stepper %}
{% step %}
Select a unit and go to the **Animation** tab.
{% endstep %}

{% step %}
Go to the **Custom settings**.

<figure><img src="/files/4gcxPcN6d28c3kreX0XF" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Click the **Add** button to add a step of animation.
{% endstep %}

{% step %}
Click on the step to open its settings.

A pop-up window will appear.
{% endstep %}

{% step %}
Set properties for visual transformations:

* **Opacity**: Controls unit transparency;
* **Rotate**: Turns a unit;
* **Scale**: Resizes a unit;
* **Skew**: Tilts a unit like a parallelogram.
  {% endstep %}
  {% endstepper %}

## Edit Advanced Animation Settings

Go to the Custom settings to add the advanced animation effects.

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

{% stepper %}
{% step %}

### Transform origin

Select the point around which transformations (rotation, scaling) of the element occur from the drop-down menu. Available options:

* Center&#x20;
* Top&#x20;
* Bottom
* Left&#x20;
* Right&#x20;
* Top Left&#x20;
* Top Right&#x20;
* Bottom Left&#x20;
* Bottom Right
  {% endstep %}

{% step %}

### Animation techniques

* **Spring**: Select to simulate real-world spring physics! Great for bouncing buttons or natural drag-releases;
* **Tween**: Select to stand for “in-between.” This is a time-based animation that runs over a fixed duration.
  {% endstep %}

{% step %}

### Bounce

Specify the bouncing effect, simulating a spring-like motion, in percent.
{% endstep %}

{% step %}

### Duration

Specify the animation duration in seconds.
{% endstep %}

{% step %}

### Delay

Specify the delay period for the animation to start in seconds.
{% endstep %}
{% endstepper %}


---

# 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://help.parta.io/no-code-editor/edit-units/animate-a-unit.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.