Options

Motion opens on its settings screen, in the suite’s workspace and under SleekWP > Motion in the standalone plugin. Change any field and use the save action at the top of the page. Every text field starts empty; an empty field uses the fallback named below, and the grey text in an empty field is only an example.

The settings are one document in the sleek-motion_settings option, read and saved through SettingsOperations_read and SettingsOperations_save. Their fields are listed in the settings reference. You can also change them from the terminal with wp sleek motion settings update; see CLI.

Selectors

Selectors decide which elements Motion animates.

• Class name: the prefix of animation classes. With motion, Motion reads motion-from:opacity-0. A class counts only when it is the prefix itself or starts with the prefix and a hyphen. Empty means animate.
• Data attribute: the attribute that holds animations. Empty means data-animate.

Breakpoints

• Default breakpoint: the media query for animations without a breakpoint prefix. Empty means (min-width: 1px), which always matches.
• Custom breakpoints: each has a name, used as @name: in an animation, and a media query, such as lg with (min-width: 1024px). Use letters, digits and underscores in the name; default is taken by the Default breakpoint.

See Breakpoints.

Defaults

• Timeline defaults: options for every timeline, including the one Motion creates for each animated element. defaults:ease-power2.inOut|duration-0.6 gives every animation that ease and duration unless it sets its own. A part without defaults:, such as repeat-1, is an option of the timeline itself.
• Element defaults: animation parts every animated element starts from. With from:opacity-0|y-20, every element fades and rises in; an element’s own parts override them, so animate-from:y-50 still moves 50 pixels.

See Defaults.

Presets

Each preset has a name and an animation string, written without the class prefix, such as fade-up with from:opacity-0|y-20. An element uses it as animate-preset-fade-up. See Presets.

A breakpoint or preset needs both a name and a value before the screen saves, and the screen and wp sleek motion breakpoint add refuse a breakpoint name with any other character than letters, digits and underscores, or named default. When two share a name, only the first is kept. A name with a hyphen saved by an earlier version still works.

Preview

• Enable Motion in the editor: also loads Motion in the block editor and in the Bricks, Elementor, Oxygen and Beaver Builder previews, so you see the animations while you edit. Off by default; it does not change the front end.

Accessibility

• Respect reduced motion: visitors whose system asks for reduced motion see every animation’s end state instead of the animation. On by default.

Event

• JavaScript event: when set, Motion waits for this event on document before it starts, instead of starting as soon as its script loads. Your own code dispatches it; Motion starts on the first dispatch and ignores later ones.

Changing the settings in code

The sleekMotion/settings filter changes the settings Motion prints for its script without changing what is stored; see PHP.