MotionKit

MotionKit is a visual GSAP animation platform for WordPress that lets you create, preview, publish, and reuse animations across different projects and any WordPress page builder, including Elementor, Divi, Gutenberg, Bricks, Avada, Beaver Builder, Breakdance, and more.

TL;DR

Open any WordPress page in MotionKit, click the element you want to animate, choose from 100+ presets or create your own animation, preview it, and publish it back to your site.

MotionKit is powered by GSAP and works with any WordPress page builder. You can also save animations and reuse them across other pages, projects, and client websites.

At-A-Glance

Overview

MotionKit is a visual GSAP animation platform for WordPress. GSAP became free in 2025, but creating advanced animations manually can still require JavaScript, selectors, timelines, triggers, and responsive testing. MotionKit brings that workflow into a visual editor connected directly to WordPress. Create animations with 100+ presets or custom visual controls, preview them on your actual page, publish them directly, and reuse the same animations across different projects, client websites, and any WordPress page builder.

A Visual Editor for Real GSAP Control

GSAP is the animation engine most professional web work runs on, and it is the reason a headline can land before the image, which lands before the button, all timed to a specific point on the scroll. Getting that normally means writing JavaScript, testing it, fixing it when it breaks on mobile, and maintaining it for as long as the site exists. MotionKit gives you the same properties through visual controls instead. You set duration, delay, easing, stagger, opacity, scale, rotation and position by adjusting fields and watching the result, not by editing a file.

Elements are targeted by CSS class rather than by a builder-generated ID, which is a small decision with a large consequence. It means the animation binds to something you control and named yourself, so it survives a rebuild of the section, and it means the same workflow applies whether the page was built in Elementor, Bricks, Gutenberg, Divi, Oxygen, Beaver Builder or a custom theme. You learn one process rather than a different animation panel for every builder your clients happen to use.

Scroll Animation You Can Actually See While You Build It

ScrollTrigger is the part of GSAP that ties animation to scroll position, and it is also the part that is hardest to get right blind. MotionKit exposes it as visual controls. You set the start and end markers, choose whether the animation plays once or scrubs in sync with the scroll, decide whether the section pins while the sequence runs, and set what happens when the user scrolls back up. Because you can see the markers against the actual page, you are adjusting a scroll reveal rather than guessing offsets and refreshing.

This covers most of what a client means when they ask for a premium feeling site. Sections that reveal as you reach them, a hero that holds while its content animates, parallax that moves at a rate you chose, a stat row that counts in at the right moment. These are the effects that take a developer an afternoon each, and they are the ones that break first when the layout changes later.

Sequencing on a Visual Timeline

Single effects are easy anywhere. Choreography is the hard part, and it is what separates a site that feels designed from one that feels decorated. MotionKit gives you a timeline where multiple elements sit as tracks, and you drag to set when each one starts, how much they overlap, and how the stagger runs across a group. Adjusting the pacing of a whole sequence becomes a drag rather than a round of edits to numbers spread across a script.

For anyone who has built animation sequences in code, this is the step that removes most of the frustration. You stop holding the sequence in your head and start looking at it. For anyone who has never written GSAP, the timeline is the thing that makes complex sequencing approachable at all, because you are working with the same mental model as video editing software rather than a set of function calls.

Different Behaviour on Desktop, Tablet and Mobile

Animation that looks considered on a large screen often looks broken on a phone. A long scroll sequence built for a 27 inch monitor runs out of room, a pinned section traps the user, and a staggered reveal turns into a wait. MotionKit handles this by letting you set animation parameters separately for desktop, laptop, tablet landscape, tablet and mobile, so the same element can behave differently on each.

That includes turning an animation off entirely on smaller screens, which is often the correct answer and is rarely the easy one in a code-based setup. The practical effect is that you ship the ambitious version where there is room for it and a simpler version where there is not, without maintaining two sets of animation logic or accepting a compromise that suits neither.

Presets for Text and Image Reveals

The preset library covers the effects that come up on almost every project, so most pages never need a custom build. Text presets include character and word splitting, typewriter, scramble, curtain and spotlight reveals, domino and gravity effects, skew-in, matrix and vortex style entrances. Image presets cover polygon and skew reveals, zoom tunnel, 3D movement on the X and Y axis, flip and scale-in. You apply one, preview it, and adjust it from there.

Presets are a starting point rather than a ceiling. Everything a preset does is exposed in the same controls you would use to build from scratch, so the usual workflow is to apply the closest match and then change the timing, easing and trigger until it fits the design. Underneath, the GSAP plugins that make these effects possible are available too, including SplitText for character and line level text work, and DrawSVG and MotionPath for SVG line drawing and movement along a path.

Build the scroll sequence once, publish it to WordPress, and reuse it on every client site after that.

How MotionKit Works

1. Build Your Website
Use the WordPress page builder you already prefer. Elementor, Bricks, Gutenberg, Divi, Avada, Breakdance, Beaver Builder, Oxygen, WPBakery, or another builder. 

2. Connect your site
Install & Active the MotionKit Connector and connect your website.

3. Open your page in MotionKit
Open your page in the MotionKit visual editor, then select any element you want to animate.

4. Create the animation
Choose from 100+ animated presets, or build your own custom animation.

5. Preview and publish
See the live animations before publishing. Once everything looks right, you can publish it.

6. Save and reuse
Save your animations and reuse them on any page, project, or client website.

Start With 100+ Animation Presets
Not every animation needs to start from an empty timeline.

MotionKit includes more than 100 ready-made animations that you can apply to elements and customize.

Use a preset as-is or turn it into your own version.

This gives you a much faster starting point for headings, images, buttons, sections, cards, and other page elements.

MotionKit brings the visual controls, timeline, preview, and publishing workflow into one place.

Get your MotionKit Lifetime Deal at Earlybird

Plan & Features

Deal Terms and Conditions

Lifetime access to MotionKit

All future updates

You must activate your license within 60 days of purchase

30 day money-back guarantee. 

Try it out for 30 days to make sure it’s right for you!

Features Included In All Plans

Visual GSAP Editor

Visual Timeline

ScrollTrigger Controls

Animation Preset Library

Reusable Animation Library

Responsive Breakpoint Control

Text Splitting Animations

SVG Draw and Motion Path Animation

Page Transitions

Class Based Element Targeting

One Click Publishing to WordPress

JSON Import and Export