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:

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

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

Breakpoints

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

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

Selectors

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

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

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

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

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

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

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

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

Nested objects

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

<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 ([]):

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

Spaces

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

<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 uses this to name its trigger.