# General

SleekMotion animates the front end of a WordPress site. An animation is
written on the element it animates, as a class such as
`animate-from:opacity-0` or as a `data-animate` attribute, so it travels with
the element when you copy it between pages or sites. Motion's script reads
those strings and runs them with [GSAP](https://gsap.com/) and its
ScrollTrigger plugin, which it bundles; you do not load GSAP yourself.

Everything else is configuration: the class prefix and attribute Motion
looks for, named breakpoints and presets, defaults for every animation, and
whether it runs in page builder previews. There is nothing to create or
index.

## Where to find it

- **In the suite**, install and activate the suite's Pro plugin, which
  carries Motion, on the Plugins screen after the suite itself; Motion then
  appears in the workspace sidebar.
  It opens on its settings, with its License page beside them.
- **As the standalone SleekMotion plugin**, it is a submenu, `SleekWP > Motion`,
  under the shared SleekWP admin menu, and shows the same screens.

Both require the `manage_options` capability, as do the settings operations
the screens use. Motion works per site; on a multisite network each site has
its own settings.

## What it loads

On the front end Motion loads one deferred script, with the saved settings
printed before it, on each page that holds an animated element: an element
with the attribute, or with a class that is the class prefix or starts with
it and a hyphen. A page without one loads no script. Motion reads the markup
the page prints before its footer scripts, so a page whose only animated
elements JavaScript adds later, such as content loaded on scroll, needs the
`sleekMotion/load` filter to load it; see [PHP](/docs/motion/hooks/php.md).
In the block editor and in the Bricks, Elementor, Oxygen and Beaver Builder
previews it loads only when
[Enable Motion in the editor](/docs/motion/settings/options.md#preview) is on.

Each animated element gets its own timeline, unless it belongs to one you
declared with [`tl`](/docs/motion/usage/timelines.md). Motion also watches the
page and re-runs the animation of an element whose class or attribute
changes, or that is added later, alone or inside a wrapper.

## The assistant

Motion's assistant explains its settings and can run Motion's
[WP-CLI commands](/docs/motion/cli.md) for you. Motion has no AI settings of its
own: the provider keys the assistant uses live in the global settings panel,
opened from the settings button beside the light/dark control, and in the
standalone plugin in its Settings. Every SleekWP product shares them.

## Updating from SleekMotion 1.x

The standalone SleekMotion plugin updates in place to 2.0.0 from any
published version. It requires PHP 8.2 and WordPress 6.5; a site below
either stays on its current release. The administration is rebuilt and stays
in the SleekWP menu, and the settings carry over unchanged.

Five animation rules changed:

- Visitors whose system asks for reduced motion see each animation's end
  state, unless you turn off
  [Respect reduced motion](/docs/motion/settings/options.md#accessibility).
- An element's own animation now wins over the
  [element defaults](/docs/motion/usage/defaults.md).
- Only classes that are the prefix itself or start with it and a hyphen
  animate, so `animate-from:opacity-0` animates and `reanimate-x` does not.
- A timeline marked with a breakpoint, such as `@md:tl`, runs only while
  that breakpoint matches.
- An element carrying `tl` plays its own `from` and `to` whatever the
  default breakpoint.

To roll back, reinstall the previous ZIP.

## Troubleshooting

**Nothing animates.** Check the page source for Motion's script and the
`sleekMotionOptions` settings printed before it. If they are missing, the
theme or a caching layer is not serving them. If they are there, check that
the classes start with the [class prefix](/docs/motion/settings/options.md#selectors)
and a hyphen, and that a [JavaScript event](/docs/motion/settings/options.md#event)
you set is actually dispatched on `document`.

**An animation with a breakpoint never runs.** The breakpoint name must be
defined in the settings; an unknown name skips the animation.

**Animations do not run for some visitors.** Their system asks for reduced
motion, and Motion shows them the end state. Turn the setting off only if
every animation on the site is safe for them.

**The settings screen refuses.** The account lacks `manage_options`.

## Reference

The generated reference lists what the code declares:
[hooks](/docs/motion/reference/hooks.md),
[WP-CLI commands](/docs/motion/reference/cli.md),
[REST operations](/docs/motion/reference/rest.md),
[settings](/docs/motion/reference/settings.md) and
[capabilities](/docs/motion/reference/capabilities.md).