Presets

Setup

Define presets in the settings, 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:

<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:

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

A name that matches no preset adds nothing.