# Breakpoints

## Setup

Define breakpoints in the [settings](/docs/motion/settings/options.md#breakpoints),
or from the terminal with `wp sleek motion breakpoint add`. Each has a name of
letters, digits and underscores, and a media query.

An animation without a breakpoint uses the default breakpoint. With none set,
that is `(min-width: 1px)`, so such an animation always runs.

## Usage

The examples assume three breakpoints:

- `sm` with `(min-width: 640px)`
- `md` with `(min-width: 768px)`
- `lg` with `(min-width: 1024px)`

A breakpoint opens the animation string:

```html
<div
  class="animate-@lg:from:duration-1|autoAlpha-0|rotate-180|xPercent-[-100]|ease-power2.inOut"
></div>
```

This animates every listed property while the screen is at least 1024px
wide.

Animations for several breakpoints combine:

```html
<div
  class="animate-@md:from:duration-1|autoAlpha-0|rotate-360|xPercent-[-100]|ease-power2.inOut animate-@lg:from:background-[red]"
></div>
```

From 768px the element fades, spins and slides in; from 1024px it also
starts from a red background. Every breakpoint whose media query matches
adds its properties to the animation, and Motion rebuilds the animations when
a breakpoint starts or stops matching.

A breakpoint name must match one defined in the settings. An animation with an
unknown name, such as `@xl` when no `xl` breakpoint exists, is skipped.

A [timeline](/docs/motion/usage/timelines.md#responsive-timelines) can carry a
breakpoint too, and then runs only while it matches.