Breakpoints

Setup

Define breakpoints in the settings, 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 can carry a breakpoint too, and then runs only while it matches.