# Presets

## Setup

Define presets in the [settings](/docs/motion/settings/options.md#presets), or
from the terminal with `wp sleek motion preset add`. A preset has a name and an
animation string written without the class prefix, such as `helicopter` with
`from:opacity-0|rotate-360|duration-3`.

## Usage

Add `animate-preset-` and the preset name to an element:

```html
<div class="animate-preset-helicopter">...</div>
```

Inside `data-animate`, the same preset is `preset-helicopter`. Motion adds the
preset's string to the element's own parts as written, so a preset may hold
several parts separated by spaces, and the element can add more:

```html
<div class="animate-preset-helicopter animate-@lg:to:xPercent-50"></div>
```

A name that matches no preset adds nothing.