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 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. In the block editor and in the Bricks, Elementor, Oxygen and Beaver Builder previews it loads only when Enable Motion in the editor is on.

Each animated element gets its own timeline, unless it belongs to one you declared with tl. 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 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.
• An element’s own animation now wins over the element defaults.
• 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 and a hyphen, and that a JavaScript 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, WP-CLI commands, REST operations, settings and capabilities.