# Animate a Unit

## Create a Simple Animation

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FtAKNS2kXfkqmeTyyxGIB%2FAnimate_a_Unit.01.png?alt=media&#x26;token=d68ef364-3a38-4ee3-8746-f272e9257954" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FcBZFjNf8Pk8YrBWVnVjW%2FAnimate_a_Unit.03.png?alt=media&#x26;token=11d7f775-1282-48eb-9458-e943a18e1b37" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FM7PKUHs5kFYdyNSGe05J%2FAnimate_a_Unit.04.png?alt=media&#x26;token=c2d5522e-fade-4cbc-8f9a-5b983cf0891c" 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 %}