# Animations

Add entrance, hover, scroll and loop animations to an element from the Animate tab. Click and Mouse animations are shown but disabled.

Select an element and open the **Animate** tab. A column of six categories sits on the left, and four of them work. You choose a preset on the right, then its timing controls appear below the presets.

## Add an animation

1. **Select an element** The Animate tab needs a selected element.
2. **Open the Animate tab** Pick a category: **Entrance**, **Hover**, **Scroll** or **Loop**.
3. **Choose a preset** Click a preset to apply it to the element. The active preset is highlighted.
4. **Set the timing** Use the controls that appear below the presets. **Preview** plays an entrance, scroll or hover animation on the canvas, and **Clear** removes it.

## Categories and presets

| Category | Plays | Presets |
| --- | --- | --- |
| Entrance | When the page loads | Fade In, Slide Up, Slide Down, Slide Left, Slide Right, Scale In, Fade+Slide, Stagger |
| Hover | While a visitor points at the element | Grow, Shrink, Lift, Glow, Rotate |
| Scroll | As the element scrolls into view | Fade In, Slide Up, Slide Down, Scale In, Fade+Slide, Stagger |
| Loop | Repeats | Pulse, Float, Bounce, Spin, Shimmer, Glow, Shake, Marquee |
| Click | Disabled | Not available |
| Mouse | Disabled | Not available |

## Timing controls for Entrance, Hover and Scroll

| Control | Range or options | Default |
| --- | --- | --- |
| Duration | A slider from 100 to 3000 ms in steps of 50 | 800 ms |
| Delay | A slider from 0 to 2000 ms in steps of 50 | 0 ms |
| Easing | Ease, Ease In, Ease Out, Ease In-Out, Smooth, Spring, Bounce | Smooth |
| Distance (px) | A number. Shown for the Slide presets and Fade+Slide | 40 |
| Stagger Gap (ms) | A number. Shown for Stagger | 120 |

An element holds one Entrance, Hover or Scroll animation at a time, because they share a single slot. Choosing another replaces it. A Loop animation is stored separately, so an element can have both.

## Loop controls

A Loop preset starts with its own timing, and a Loop always sets itself to repeat forever until you change **Repeat**.

| Preset | Starts at | Timing |
| --- | --- | --- |
| Pulse | 2s | Ease In-Out |
| Float | 3s, alternating direction | Ease In-Out |
| Bounce | 1s | Ease In-Out |
| Spin | 2s | Linear |
| Shimmer | 2s | Linear |
| Glow | 2s | Ease In-Out |
| Shake | 0.5s | Ease In-Out |
| Marquee | 15s | Linear |

| Control | Options |
| --- | --- |
| Duration | A value such as 2s |
| Timing | Ease, Ease In, Ease Out, Ease In-Out, Linear |
| Repeat | Infinite, 1, 2, 3, 5 |
| Direction | Normal, Alternate, Reverse, Alt. Reverse |
| Delay | A value such as 0s |

Hover effects also exist as **Hover Styles** in the Design tab, where you can set exact colours. See [The Design inspector](https://www.uova.com/help/build/editor/design-inspector).

## Limits

- Click and Mouse animations are present in the tab but disabled, so you cannot apply them.
- The AI chat can add an animation too. See [Edit with AI chat](https://www.uova.com/help/build/editor/ai-chat-edit).

## Common questions

**Why are Click and Mouse greyed out?**

They are flagged disabled in the editor and cannot be used yet.

**Can I animate a whole section?**

Select the section and open the Animate tab. The tab applies to whichever element is selected.

**Can I undo an animation I added?**

Yes. A preset, a changed timing value and Clear each record an undo step. Press `Cmd+Z` or use the **Undo** button.

**How do I stop a loop?**

Open the Loop category and press **Clear**.

Source: https://www.uova.com/help/build/editor/animations