# Syntax

An animation is a short string written on the element it animates. If you
know Tailwind, the shape will look familiar. Each part of a string comes in
this order:

1. **Breakpoint** (optional)
2. **Selector** (optional)
3. **State** (required)
4. **Animation object** (required)

## Class or attribute

Write animations as classes or in the `data-animate` attribute:

```html
<div data-animate="from:opacity-0"></div>
<div class="animate-from:opacity-0"></div>
```

In a class, every part is its own class and starts with the `animate-`
prefix. Motion reads a class only when it is the prefix itself or starts with
the prefix and a hyphen, so a class without it is ignored without a warning.
Inside `data-animate`, the same parts are written without the prefix and
separated by spaces:

```html
<div data-animate="from:opacity-0 to:opacity-0.5"></div>
<div class="animate-from:opacity-0 animate-to:opacity-0.5"></div>
```

An element may use both; Motion reads the attribute and the classes together.
Classes are the choice where a page builder does not let you set a custom
attribute. The prefix and the attribute name are
[settings](/docs/motion/settings/options.md#selectors).

## Breakpoints

A breakpoint limits an animation to a media query from the settings. Write
`@` and the breakpoint name first:

```html
<div class="animate-@sm:from:opacity-0"></div>
```

A breakpoint name that is not defined in the settings is skipped, together
with its animation. See [Breakpoints](/docs/motion/usage/breakpoints.md).

## Selectors

By default an animation applies to the element itself. A selector in
brackets (`[]`) before the state targets other elements instead:

```html
<div class="animate-[&>h1]:from:opacity-0|stagger-0.25">
  <h1>...</h1>
  <h1>...</h1>
  <h1>...</h1>
</div>
```

`&` is the element that carries the class, so `[&>h1]` targets its direct
`h1` children. Use an underscore for a space, as in `[&_h1]` for every `h1`
inside the element. A selector without `&`, such as `[h1]`, is matched
against the whole page.

With a breakpoint, the breakpoint comes first:

```html
<div class="animate-@sm:[&>h1]:from:opacity-0|stagger-0.25">
  <h1>...</h1>
  <h1>...</h1>
  <h1>...</h1>
</div>
```

## State

The state says which end of the animation the properties describe:

- **from**: the state the element starts from.
- **to**: the state the element ends in.

```html
<div class="animate-from:opacity-0"></div>
<div class="animate-to:xPercent-50"></div>
```

With both, the element animates from one to the other:

```html
<div class="animate-from:xPercent-[-50] animate-to:xPercent-50"></div>
```

## Animation object

The animation object follows the state and lists the properties to animate:

```html
<div class="animate-to:yPercent-10"></div>
```

Each property is split at its first hyphen: the part before it is the
property name, the part after it the value. `true` and `false` become
booleans, numbers become numbers, and everything else stays a string.

### Chaining properties

Separate properties with a pipe (`|`):

```html
<div class="animate-to:opacity-0.5|yPercent-10"></div>
```

### Nested objects

Separate the keys of a nested option with a dot (`.`):

```html
<div
  class="animate-from:opacity-0|scrollTrigger.trigger-&|scrollTrigger.start-top_center"
></div>
```

Use dots only for options GSAP itself expects as an object, such as
`scrollTrigger`. Transforms use GSAP's flat property names, for example
`animate-to:scaleX-2|scaleY-2` rather than `scale.x` and `scale.y`.

### Negative values

Enclose a negative value in brackets (`[]`):

```html
<div class="animate-to:xPercent-[-50]"></div>
```

### Spaces

Write a space in a value as an underscore (`_`):

```html
<div class="animate-to:boxShadow-[0_0_50px_20px_red]"></div>
```

### Elements as values

A value that starts with `&` is resolved against the element, as in a
selector: `&` alone is the element itself and `&>img` its direct `img`
children. [ScrollTrigger](/docs/motion/usage/scrolltrigger.md) uses this to
name its trigger.