# 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 Start animating now 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. HTML ```
``` ## 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. HTML ```
``` ## 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. HTML ```
``` ## 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. HTML ```
``` ## 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**. HTML ```
``` ## 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 reference](https://sleekwp.com/docs/motion/cli/) wp 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 ` \# Adds an entry, replacing one with the same name `wp sleek motion preset add ` ## 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 €49 [Continue to checkout](https://sleekwp.com/checkout/?edd_action=add_to_cart&download_id=183) ## …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 €749 [Continue to checkout](https://sleekwp.com/checkout/?edd_action=add_to_cart&download_id=2069)