Title: MotionKit – Visual GSAP Animation Builder for Elementor, Divi, Bricks & More Author: Wealcoder Published: October 12, 2026 Last modified: October 12, 2026 --- Search plugins ![](https://ps.w.org/motionkit/assets/banner-772x250.png?rev=3741105) ![](https://ps.w.org/motionkit/assets/icon-256x256.png?rev=3741105) # MotionKit – Visual GSAP Animation Builder for Elementor, Divi, Bricks & More By [Wealcoder](https://profiles.wordpress.org/wealcoder/) [Download](https://downloads.wordpress.org/plugin/motionkit.1.6.0.zip) * [Details](https://wordpress.org/plugins/motionkit/#description) * [Reviews](https://wordpress.org/plugins/motionkit/#reviews) * [Installation](https://wordpress.org/plugins/motionkit/#installation) * [Development](https://wordpress.org/plugins/motionkit/#developers) [Support](https://wordpress.org/support/plugin/motionkit/) ## Description **MotionKit is a visual GSAP animation builder for WordPress.** Design your website with any page builder or theme, connect it to MotionKit, and add professional scroll animations, text animations, parallax, hover effects and page transitions by pointing and clicking on your live page. No JavaScript, no CSS, no coding. MotionKit works with **every WordPress page builder and theme**: Elementor, Divi, Gutenberg (block editor), Avada, Bricks Builder, WPBakery, SeedProd, Breakdance, Oxygen, Beaver Builder, Astra, Kadence, GeneratePress, Hello Elementor and any classic or block theme. Build the site your way, then animate it with MotionKit. Under the hood MotionKit is powered by **GSAP (GreenSock Animation Platform)** and the browser-native **Web Animations API (WAAPI)**. You get the full power of GSAP and its plugins (ScrollTrigger, SplitText, Flip, DrawSVG, MorphSVG and more) with a fast, lightweight runtime that uses the browser’s own animation engine. MotionKit writes the GSAP code for you. **Free forever for 1 website & 15 active animations.** No credit card, no trial clock. Upgrade only when you need more. [Website](https://motionkit.io/) | [Live Demos](https://motionkit.io/presets/) | [Page Builder Support](https://motionkit.io/wordpress-page-builder-for-animation/) | [Documentation](https://motionkit.io/docs/) | [Video Tutorials](https://motionkit.io/video-tutorials/) #### How MotionKit works 1. **Design your website** with any page builder or theme. 2. **Install this connector plugin** and create a free MotionKit account. 3. **Connect your website** with one click. 4. **Animate without coding.** Open the visual editor, click an element, pick one of 95+ presets or build a custom GSAP timeline, preview on every device and publish. Your animations are stored on your own WordPress site and rendered by a bundled runtime built on **GSAP (GreenSock Animation Platform)** and the browser-native ** Web Animations API (WAAPI)**. You get the full power of GSAP and its plugins with the speed of the browser’s own animation engine, and MotionKit writes the code for you. #### Why designers and agencies choose MotionKit * **Visual GSAP animation builder** – point, click and animate on a live preview of your real page. No code snippets, no enqueuing scripts. * **95+ ready-made animation presets** – text, image, scroll, horizontal scroll, smooth scrolling, flip, split text, parallax, SVG, physics and more. Select an element, apply a preset, done. See the full [preset library](https://motionkit.io/presets/) below. * **One plugin for every builder** – animate Elementor, Divi, Gutenberg, Avada, Bricks, WPBakery, SeedProd, Breakdance, Oxygen, Beaver Builder and any theme with the same tool and the same saved animations. * **Full GSAP plugin support** – ScrollTrigger, ScrollSmoother, ScrollToPlugin, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPathPlugin, MotionPathHelper, Flip, Draggable, InertiaPlugin, CustomEase, EasePack, GSDevTools and Physics2D. * **Visual timeline editor** – sequence multiple elements, overlap tweens, stagger cards and grids, fine-tune easing. * **Complete ScrollTrigger controls** – start and end position, scrub, pin, pin spacing, play once, toggle actions and debug markers. * **Responsive animations** – separate settings for desktop, laptop, tablet landscape, tablet and mobile. Disable any effect on any device. * **Save, export and reuse** – save animations to your library or export them as JSON and import them into any other website on any other page builder. Build once, reuse on every client site. * **AI animation builder** – describe the motion you want and MotionKit’s built- in AI adds it to the page or element. * **MCP server for AI assistants** – connect Claude, ChatGPT or any MCP-compatible AI, say “add professional animations to my whole website”, and MotionKit does it automatically. * **Fast and lightweight** – GSAP + WAAPI runtime loaded only on pages that use animations, compiled timelines cached, all assets bundled locally. Nothing loads from third-party CDNs on your front end. * **Accessible by default** – respects the visitor’s reduced-motion preference. * **Beyond WordPress** – the same editor supports Webflow, Shopify, Wix and Framer, plus an SDK for AI-built and custom-coded sites, so your animation library travels with you. #### Scroll animations and ScrollTrigger Create scroll-triggered animations that reveal content as visitors scroll – fade in on scroll, slide in on scroll, scale, rotate, stagger – or scrub an animation to scroll progress for Apple-style storytelling pages. Pinned and sticky sections, horizontal scroll, smooth scrolling (ScrollSmoother), sticky headers, video scrubbing, image sequences and scroll-to anchors are all built in. A modern, visual replacement for AOS and Animate.css. #### Parallax animations Add parallax scrolling to backgrounds, images, text layers and whole sections. Multi- layer parallax, mouse-movement parallax and depth effects, all controlled visually. #### Text animations and split text Powered by GSAP SplitText and ScrambleText, MotionKit animates headings by **character, word or line**: text reveal, typewriter, scramble, domino, scatter, ink drop, pendulum, origami fold, rain fall, spotlight and 20 more. Perfect for animated headlines and hero sections. #### Image, SVG and physics animations Image reveal on scroll, cinematic masks, polygon and aperture reveals, 3D moves, flips and zoom tunnels. Draw SVG strokes with DrawSVG, morph shapes with MorphSVG, move elements along a path with MotionPath, and add real-world motion with Physics2D and Inertia. #### Hover, click, drag and page load animations Hover reveals and magnifiers, 3D tilt, custom cursor effects, click triggers, Draggable elements, Flip layout transitions, page load and entrance animations, page transitions, preloaders, counters, marquees and stagger effects. #### Preset library Every preset is one click to apply and fully editable afterwards. Live demos for each: **Text animations (30)** [Text Reveal](https://demo.motionkit.io/text-reveal-animation/)· [Typewriter](https://demo.motionkit.io/text-typewritter-animation/) · [Scramble Text](https://demo.motionkit.io/scramble-text-animation/)· [Word Split](https://demo.motionkit.io/text-word-split-animation/) · [Character Split](https://demo.motionkit.io/text-character-split-animation/)· [Text Wave](https://demo.motionkit.io/text-wave-animation/) · [Text Scale](https://demo.motionkit.io/text-scale-animation/)· [Text Move](https://demo.motionkit.io/text-move-animation/) · [Text Rotate](https://demo.motionkit.io/text-rotate-animation/)· [Text Spin](https://demo.motionkit.io/text-spin-animation/) · [Text Skew-In](https://demo.motionkit.io/text-skew-in-animation/)· [Text Curtain Reveal](https://demo.motionkit.io/text-curtain-reveal-animation/) · [Text Spotlight Reveal](https://demo.motionkit.io/text-spotlight-reveal-animation/)· [Text Vertical Blinds](https://demo.motionkit.io/text-vertical-blinds-animation/)· [Text Unfold](https://demo.motionkit.io/text-unfold-animation/) · [Text Origami Fold](https://demo.motionkit.io/text-origami-fold-animation/)· [Text Domino Effect](https://demo.motionkit.io/text-domino-effect/) · [Text Pendulum Swing](https://demo.motionkit.io/text-pendulum-swing-animation/)· [Text Gravity Fall](https://demo.motionkit.io/text-gravity-fall-animation/) · [Character Rain Fall](https://demo.motionkit.io/text-character-rain-fall/)· [Text Popcorn Pop](https://demo.motionkit.io/text-popcorn-pop-animation/) · [Text Scatter Reassemble](https://demo.motionkit.io/text-scatter-reassemble-animation/)· [Character Shuffle](https://demo.motionkit.io/text-character-shuffle-animation/)· [Text Magnet Pull](https://demo.motionkit.io/text-magnet-pull-animation/) · [Text Ink Drop Spread](https://demo.motionkit.io/text-ink-drop-spread-animation/)· [Text Invert](https://demo.motionkit.io/text-invert-animation/) · [Matrix Reveal](https://demo.motionkit.io/text-matrix-reveal/)· [Text Cyber Phantom](https://demo.motionkit.io/text-cyber-phantom-animation/) · [Quantum Snap](https://demo.motionkit.io/text-quantum-snap/) · [Vortex](https://demo.motionkit.io/text-vortex-unwind-animation/) **Image animations (14)** [Image Reveal](https://demo.motionkit.io/imge-reveal-animation/)· [Image Fade](https://demo.motionkit.io/image-fade-animation/) · [Image Scale-In](https://demo.motionkit.io/image-scale-in-animation/)· [Image Skew In](https://demo.motionkit.io/image-skew-in-animation/) · [Image Flip](https://demo.motionkit.io/image-flip-animation/)· [Cinematic Mask](https://demo.motionkit.io/image-cinematic-mask/) · [Image Polygon Reveal](https://demo.motionkit.io/image-polygon-reveal-animation/)· [Image Aperture Reveal](https://demo.motionkit.io/image-aperture-reveal/) · [Image Zoom Tunnel Reveal](https://demo.motionkit.io/image-zoom-tunnel-reveal-animation/)· [Image 3D Move X-Axis](https://demo.motionkit.io/image-3d-move-x-axis-animation/)· [Image 3D Move Y-Axis](https://demo.motionkit.io/image-3d-move-y-axis-animation/)· [Image Scale With Scroll](https://demo.motionkit.io/image-scale-with-scroll/) · [Image Stretch With Scroll](https://demo.motionkit.io/image-stretch-with-scroll/)· [Stagger Diagonal Reveal](https://demo.motionkit.io/stagger-diagonal-reveal-2/) **Scroll and interaction effects (14)** [Horizontal Scroll](https://demo.motionkit.io/horizontal-scroll-animation/)· [Header Sticky](https://demo.motionkit.io/header-sticky/) · [Hover Reveal](https://demo.motionkit.io/image-reveal-on-hover/)· [Hover Magnifier](https://demo.motionkit.io/hover-magnifier-animation/) · [3D Tilt](https://demo.motionkit.io/3d-tilt-animation/)· [Cursor Move](https://demo.motionkit.io/cursor-move-animation/) · [Cursor Reveal](https://demo.motionkit.io/cursor-reveal-animation/)· [Spotlight Reveal](https://demo.motionkit.io/spotlight-reveal/) · [Color Swipe Reveal](https://demo.motionkit.io/text-color-swipe-reveal/)· [Cube Reveal](https://demo.motionkit.io/cube-reveal/) · [Slice Shutter](https://demo.motionkit.io/image-slice-shutter/)· [Mosaic Depth](https://demo.motionkit.io/image-mosaic-depth/) · [Video Frame](https://demo.motionkit.io/video-frame-animation/)· [Media Popup](https://demo.motionkit.io/media-popup-animation/) **Container and stagger animations (6)** [Stagger Fade Up](https://demo.motionkit.io/stagger-fade-up/)· [Stagger Blur In](https://demo.motionkit.io/stagger-blur-in/) · [Stagger Clip Reveal](https://demo.motionkit.io/stagger-clip-reveal/)· [Stagger Unfold](https://demo.motionkit.io/stagger-unfold/) · [Stagger Tilt Drop](https://demo.motionkit.io/stagger-tilt-drop/)· [Stagger Scale Pop](https://motionkit.io/presets/) **Pin, sticky and stacked card scroll effects (6)** [Pin Sticky Sections](https://demo.motionkit.io/pin-sticky-animation/) [Stacked Card Scroll](https://demo.motionkit.io/stacked-card/) **GSAP plugin presets (25)** [DrawSVG](https://demo.motionkit.io/drawsvg-demo-1/)– draw logos, icons and illustrations stroke by stroke [MorphSVG](https://demo.motionkit.io/morphsvg-demo-1/)– morph one shape into another [MotionPath](https://demo.motionkit.io/motionpath-demo-1/)– move elements along a custom path [Flip](https://demo.motionkit.io/flip-demo-1/)– seamless layout and state transitions [Physics2D](https://demo.motionkit.io/physics2d-demo-1/)– gravity, velocity and bounce Browse everything with live previews at [motionkit.io/presets](https://motionkit.io/presets/). #### Page builder and theme compatibility MotionKit animates elements on the rendered page, so it is not tied to any builder’s internals. Dedicated guides: * **Elementor** – the easiest way to use GSAP in Elementor. Animate any widget, container or section, including Elementor V4 atomic elements. No Elementor Pro required. [GSAP animation for Elementor](https://motionkit.io/gsap-animation-for-elementor/) * **Divi** – a complete Divi animation plugin for Divi 4 and Divi 5. Scroll animations, split text reveals, parallax and hover effects on any Divi module, row or section, far beyond Divi’s built-in options. [GSAP animation for Divi](https://motionkit.io/gsap-animation-for-divi/) * **Gutenberg** – animate any core, pattern or third-party block in the block editor and full site editing themes. [GSAP animation for Gutenberg](https://motionkit.io/gsap-animation-for-gutenberg/) * **Bricks Builder** – ScrollTrigger animations, pinned sections and text reveals without custom interactions code. [GSAP animation for Bricks](https://motionkit.io/gsap-animation-for-bricks/) * **Avada, WPBakery, SeedProd, Breakdance, Oxygen, Beaver Builder** – full support, no extra setup. * **Any theme** – Astra, Kadence, GeneratePress, OceanWP, Hello Elementor, Twenty Twenty-Five and every classic or block theme. #### Built for agencies and freelancers Create an animation once, save it to your cloud library or export it as JSON, and reuse it on any other client site built with any builder. Standardise your motion design system and deliver animated landing pages in a fraction of the time. #### Free vs Pro **Free:** visual editor, presets, ScrollTrigger controls, responsive settings, 1 website, 2 pages, 15 active animations. **Pro:** unlimited pages and animations, premium presets, full cloud library, AI features and agency tools. [Compare plans](https://motionkit.io/pricing/) MotionKit uses a hosted visual editor at editor.motionkit.io; a free account is required. Published animations live on your WordPress site and keep running even if you disconnect. ### External services MotionKit bundles all of its JavaScript, CSS, runtime and icons locally. The plugin communicates with the MotionKit service only in the following cases: 1. **Account connection (admin only).** When you click Connect, the plugin exchanges a token with `https://editor.motionkit.io/connect/token`, validates it via `/connect/ validate` and revokes it via `/connect/revoke` when you disconnect. The site URL and the signed token are sent; the token is stored encrypted on your site. 2. **Launching the editor (admin only).** Clicking Launch Editor opens `https://editor. motionkit.io/` in your browser with your site URL and a short-lived signed token so the editor can load a live preview of your page. 3. **AI assistants (optional).** If you connect an AI assistant, it talks to the MotionKit MCP endpoint at `https://editor.motionkit.io/mcp`. 4. **Upgrade link (optional).** The dashboard links to `https://motionkit.io`; no site data is sent. No visitor data is sent to MotionKit and the plugin performs no tracking on your front end. [Terms of Use](https://motionkit.io/terms-of-use/) | [Privacy Policy](https://motionkit.io/privacy/) | [Source code](https://github.com/Wealcoder/motionkit) ### Source code The compressed JavaScript and CSS in `assets/build/` is generated from human-readable source that ships with the plugin in the `src/` folder, together with the build configuration (`package.json` and `webpack.config.js`). The same source is public on GitHub: https://github.com/Wealcoder/motionkit * `src/modules/admin/` and `src/css/` build the admin screens (`admin.js`, `admin- tools.js`, `admin-animations.js` and their stylesheets). * `src/modules/editor-bridge.js` builds `modules/editor-bridge.js`, which connects a page preview to the MotionKit editor. * `src/motionkit-waapi/` builds `motionkit-waapi.js`, the front-end animation runtime, and `motionkit-waapi-engine.js`. #### Building from source 1. Install Node.js 18 or later, which includes npm. 2. Download the source: `git clone https://github.com/Wealcoder/motionkit.git`, then` cd motionkit`. 3. Install the build tools: `npm ci` (or `npm install` when building from the plugin zip, which has no lockfile). 4. Build: `npm run build:wp` The build runs `@wordpress/scripts` (webpack) with `webpack.config.js` and writes the bundles to `assets/build/`. ## Screenshots [⌊The MotionKit visual editor animating a live preview of a WordPress page.⌉⌊The MotionKit visual editor animating a live preview of a WordPress page.⌉[ The MotionKit visual editor animating a live preview of a WordPress page. [⌊Connecting your site to MotionKit from the WordPress dashboard.⌉⌊Connecting your site to MotionKit from the WordPress dashboard.⌉[ Connecting your site to MotionKit from the WordPress dashboard. [⌊The preset library with 95+ text, image, scroll, flip, SVG and physics animations.⌉⌊ The preset library with 95+ text, image, scroll, flip, SVG and physics animations .⌉[ The preset library with 95+ text, image, scroll, flip, SVG and physics animations. [⌊The Tools tab for managing saved animation data.⌉⌊The Tools tab for managing saved animation data.⌉[ The Tools tab for managing saved animation data. ## Installation 1. In your WordPress dashboard go to **Plugins Add New**, search for **MotionKit** and click **Install Now**, or upload the plugin ZIP file. 2. Click **Activate**. 3. Open the **MotionKit** menu and click **Connect** to link your site with your MotionKit account (free to create). 4. Click **Launch Editor**, select any element on your page and apply a preset or build your own animation. **Requirements:** WordPress 6.8 or later, PHP 7.4 or later. Works with any theme and page builder. ## FAQ ### What is MotionKit? MotionKit is a visual GSAP animation builder for WordPress. You design your site with any page builder or theme, connect it to MotionKit, and add scroll animations, text reveals, parallax, hover effects and page transitions by clicking elements on a live preview, without writing code. ### Who makes MotionKit? MotionKit is built by Wealcoder, the team behind Animation Addons for Elementor and other WordPress plugins and themes used on more than 30,000 websites. ### Is MotionKit free? Yes. The plugin is free and the free plan covers 1 website, 2 pages and 15 active animations with no time limit. Paid plans add unlimited pages and animations, premium presets and AI features. ### Why use MotionKit instead of Elementor Pro Motion Effects or Divi’s built-in animations? Built-in builder animations give you a fixed menu of entrance effects. MotionKit gives you real GSAP: scroll-scrubbed timelines, pinning, split text, SVG drawing, Flip transitions, physics and a visual timeline for sequencing several elements. It also works identically across every builder, so your animations are not locked to one tool, and you can reuse them on other sites. ### Do I need to know GSAP or JavaScript? No. MotionKit generates the GSAP and Web Animations API code for you. If you do know GSAP, you will recognise ScrollTrigger start/end, scrub, pin, stagger and easing controls. ### How do I add GSAP animations to WordPress without coding? Install MotionKit, connect your site, open the visual editor, click an element and choose a preset such as “Text Reveal” or “Stagger Fade Up”. Adjust timing, preview on each device and publish. ### Which GSAP plugins does MotionKit support? ScrollTrigger, ScrollSmoother, ScrollToPlugin, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPathPlugin, MotionPathHelper, Flip, Draggable, InertiaPlugin, CustomEase, EasePack, GSDevTools and Physics2D. ### Does MotionKit work with Elementor? Yes, with Elementor Free and Elementor Pro, including Elementor V4. Elementor Pro Motion Effects are not required. ### Does MotionKit work with Divi? Yes. MotionKit is fully compatible with Divi 4 and Divi 5 and animates any Divi module, row or section. ### Does MotionKit work with Gutenberg, Avada, Bricks, WPBakery, SeedProd, Astra or my theme? Yes. MotionKit works with the block editor and block themes, Avada, Bricks Builder, WPBakery, SeedProd, Breakdance, Oxygen, Beaver Builder, Astra, Kadence, GeneratePress and any WordPress theme. ### How do I create a scroll-triggered animation (ScrollTrigger) in WordPress? Select an element, choose the Scroll trigger, then set the start and end positions. Turn on Scrub to tie the animation to scroll progress, or Pin to hold a section in place while content scrolls. ### Can I add parallax, horizontal scroll or smooth scrolling? Yes. Parallax, horizontal scroll and smooth scrolling (ScrollSmoother) are available as presets and as custom timelines. ### Can I animate text by letter, word or line? Yes. Split text presets animate headings by character, word or line with stagger, including typewriter, scramble and masked reveal effects. ### Can I reuse animations on another website or page builder? Yes. Save any animation to your library or export it as a JSON file, then import it into any other website built with any page builder. ### Can I use AI to build animations? Yes, in two ways. The editor has built-in AI that adds animation to a page or element from a prompt. MotionKit also provides an MCP server, so AI assistants such as Claude and ChatGPT can connect and add professional animations across your entire website automatically. ### Will MotionKit slow down my website? No. The runtime is lightweight, built on GSAP and the native Web Animations API, loads only on pages that contain animations and caches compiled timelines. All scripts and styles are bundled locally. ### Are animations responsive? Yes. Every animation has separate settings for desktop, laptop, tablet landscape, tablet and mobile. ### Is MotionKit accessible? MotionKit respects the visitor’s “prefers-reduced-motion” setting, so animations are reduced or skipped for users who request it. ### Does MotionKit work outside WordPress? Yes. The MotionKit editor also supports Webflow, Shopify, Wix, Framer and other platforms, and an SDK is available for AI-built and custom-coded websites. This plugin is the WordPress connector. ### Do I need a MotionKit account? Yes, a free account is required to use the hosted visual editor. Published animations are stored on your WordPress site and keep running even if you disconnect. ### What happens to my animations if I deactivate or disconnect? Your animation data stays on your site. Disconnecting only revokes the editor connection; nothing is deleted unless you remove it from the Tools tab. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “MotionKit – Visual GSAP Animation Builder for Elementor, Divi, Bricks & More” is open source software. The following people have contributed to this plugin. Contributors * [ Wealcoder ](https://profiles.wordpress.org/wealcoder/) [Translate “MotionKit – Visual GSAP Animation Builder for Elementor, Divi, Bricks & More” into your language.](https://translate.wordpress.org/projects/wp-plugins/motionkit) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/motionkit/), check out the [SVN repository](https://plugins.svn.wordpress.org/motionkit/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/motionkit/) by [RSS](https://plugins.trac.wordpress.org/log/motionkit/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.6.0 * New: Export and import animations as JSON for reuse on other sites. * Improved: Runtime performance and caching of compiled timelines. * Improved: Compatibility with Elementor V4, Divi 5 and Bricks. * Fixed: Editor connection edge cases. #### 1.0.0 * Initial release. * Free animations now load on the front page, archives, search and 404 pages. * Scroll animations follow scroll position smoothly. * Scroll trigger element settings and edits to Start, End, Play Once and Scrub take effect immediately. * Free animations start at the viewport centre by default. ## Meta * Version **1.6.0** * Last updated **1 day ago** * Active installations **Fewer than 10** * WordPress version ** 6.8 or higher ** * Tested up to **7.1.3** * PHP version ** 7.4 or higher ** * Tags * [animation](https://wordpress.org/plugins/tags/animation/)[elementor animation](https://wordpress.org/plugins/tags/elementor-animation/) [gsap](https://wordpress.org/plugins/tags/gsap/)[scroll animation](https://wordpress.org/plugins/tags/scroll-animation/) * [Advanced View](https://wordpress.org/plugins/motionkit/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/motionkit/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/motionkit/reviews/) ## Contributors * [ Wealcoder ](https://profiles.wordpress.org/wealcoder/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/motionkit/)