Effortless animations for WordPress
Write animations as classes or a data attribute on the elements themselves, and Motion runs them with the GSAP and ScrollTrigger it bundles:
animate-@desktop:from:opacity-0|y-4|ease-power2.inOut
Works with:
Beaver Builder too, and anywhere you can set a class or a data attribute.
Works with any page builder and beyond
An animation is written on the element it animates, so it travels with the element when you copy it between pages or sites. With Enable Motion in the editor on, it also runs in the block editor and the builder previews.
Animate any property in one class
An animation takes CSS properties and GSAP options in a short syntax: a state such as from or to, then the properties chained with a pipe.
<div class="animate-from:scale-0|autoAlpha-0|ease-elastic|duration-3"></div>Responsive animations? Just @dd it
Name breakpoints in the settings, such as lg for (min-width: 1024px), and open an animation with @lg: to run it only while that media query matches.
<div class="animate-@desktop:from:duration-1|autoAlpha-0|rotate-180|xPercent-[-100]|ease-power2.inOut"></div>Stagger multiple elements with ease
A selector in brackets targets other elements, such as [&>div] for the direct div children, and stagger spaces out when each of them starts.
<div class="animate-[&>div]:from:stagger-0.1|autoAlpha-0|rotate-180|xPercent-[-100]|ease-power2.inOut">
<div></div>
<div></div>
<div></div>
</div>Create timelines using a simple syntax
Add tl to an element and every animated element inside it joins one timeline, so their animations play one after another, with defaults that apply to all of them.
<div class="animate-tl animate-defaults:ease-power2.inOut">
<div class="animate-from:x-50|opacity-0"></div>
<div class="animate-from:x-[-50]|opacity-0"></div>
<div class="animate-from:y-50|opacity-0"></div>
</div>Animate elements on scroll with ease
Motion bundles GSAP’s ScrollTrigger, so scrollTrigger is an option like any other: scrollTrigger-& starts the animation when the element scrolls into view.
<div class="animate-from:scrollTrigger-&|duration-1|autoAlpha-0|rotate-180|yPercent-100|ease-power2.inOut"></div>Configure once, animate everywhere
Breakpoints, presets and defaults live in Motion’s settings, so the classes on your elements stay short. Everything else is configuration: there is nothing to create or index.
Presets
Save an animation string under a name, such as fade-up, and use it on any element as animate-preset-fade-up.
Defaults
Timeline defaults give every animation an ease or a duration, and element defaults are the parts every animated element starts from.
Reduced motion
Visitors whose system asks for reduced motion see each animation’s end state. Respect reduced motion is on by default.
Editor previews
With Enable Motion in the editor on, animations also run in the block editor and in the Bricks, Elementor, Oxygen and Beaver Builder previews.
Start event
Set a JavaScript event, and Motion waits until your code dispatches it on document before it starts.
Assistant
Motion’s assistant explains its settings and runs its WP-CLI commands, with the AI provider keys in Settings that every SleekWP plugin shares.
Operate SleekMotion from the terminal
Everything SleekMotion does in a script belongs to a first-class command surface under wp sleek motion. Structured JSON output, safe destructive operations, and WordPress-native multisite behavior come as standard.
You design in the admin like always. Provisioning, refreshing, and verifying move to the terminal, where a person, a deploy script, or a coding agent can run them and trust the exit code.
CLI referencewp sleek motion
WP-CLI
# Settings
wp sleek motion settings get --format=json
# Presets and breakpoints
wp sleek motion preset list --format=json
# Lists the entries
wp sleek motion breakpoint list
# Adds an entry, replacing one with the same name
wp sleek motion breakpoint add <name> <value>
# Adds an entry, replacing one with the same name
wp sleek motion preset add <name> <value>
FAQ
What is SleekMotion?
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.
Do I need to load GSAP myself?
No. SleekMotion bundles GSAP and its ScrollTrigger plugin and loads them with its own script.
Does it work with my page builder?
Yes. Animations are classes or a data attribute on the element, so they work wherever you can set those, including the block editor, Bricks, Elementor, Oxygen and Beaver Builder, and Motion can run in their previews.
What do visitors who prefer reduced motion see?
Each animation’s end state instead of the animation. The Respect reduced motion setting does this and is on by default; turn it off only if every animation on the site is safe for them.
Does SleekMotion have an AI assistant?
Yes. In the workspace, 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 assistant uses the AI provider keys in Settings, which every SleekWP plugin on the site shares.
Can I change the settings from the terminal?
Yes. wp sleek motion reads and changes the settings, presets and breakpoints, so a script can list, add and remove presets and breakpoints or change one setting.
What does SleekMotion need?
PHP 8.2 or later and WordPress 6.5 or later.
Do I need a license key?
No. SleekMotion works without one. A license key from sleekwp.com turns on updates: enter it on the License page under SleekWP > Motion, or define SLEEK_MOTION_LICENSE in wp-config.php.
Pricing
Lifetime license
Pay once, own it forever
Unlock full access to all features with a single, one-time payment. Enjoy unlimited use of comprehensive functionalities and continuous updates without any recurring fees. Invest once and benefit indefinitely.
What’s included
Unlimited sites
Lifetime updates
Product support via E-Mail (1 year)
Discounts for future products
…or get the Bundle Deal
and save €250
The Bundle (unlimited sites)
Pay once, own it forever
Elevate your WordPress site with our exclusive plugin bundle that includes all of our premium plugins in one package. Enjoy lifetime updates and lifetime support. Save significantly compared to buying plugins individually.
What’s included
SleekAI
SleekByte
SleekMotion
SleekPixel
SleekView
SleekRank
SleekTrack