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
PricingFree downloadThe WordPress.org download is free. Pro versions, add-ons or external services may cost extra.
CompatibilityRequires WordPress 6.8 and PHP 7.4.
SourceWordPress plugins · Oct 28, 2026
01 / Source details
Aboutthistool.
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 | Live Demos | Page Builder Support | Documentation | Video Tutorials
How MotionKit works
01Design your website with any page builder or theme.
02Install this connector plugin and create a free MotionKit account.
03Connect your website with one click.
04Animate 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 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.
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 · Typewriter · Scramble Text · Word Split · Character Split · Text Wave · Text Scale · Text Move · Text Rotate · Text Spin · Text Skew-In · Text Curtain Reveal · Text Spotlight Reveal · Text Vertical Blinds · Text Unfold · Text Origami Fold · Text Domino Effect · Text Pendulum Swing · Text Gravity Fall · Character Rain Fall · Text Popcorn Pop · Text Scatter Reassemble · Character Shuffle · Text Magnet Pull · Text Ink Drop Spread · Text Invert · Matrix Reveal · Text Cyber Phantom · Quantum Snap · Vortex
GSAP plugin presets (25) DrawSVG – draw logos, icons and illustrations stroke by stroke MorphSVG – morph one shape into another MotionPath – move elements along a custom path Flip – seamless layout and state transitions Physics2D – gravity, velocity and bounce
Browse everything with live previews at 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
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
Gutenberg – animate any core, pattern or third-party block in the block editor and full site editing themes. GSAP animation for Gutenberg
Bricks Builder – ScrollTrigger animations, pinned sections and text reveals without custom interactions code. 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.
AI animation builder for WordPress: MCP server for Claude, ChatGPT and AI assistants
Animate your WordPress website by describing what you want. MotionKit includes an MCP server (Model Context Protocol), so AI assistants such as Claude , ChatGPT and any MCP-compatible AI client can build real GSAP animations on your live pages.
Animate with plain language – ask “fade the hero heading up on scroll” or “stagger the service cards”, and your AI assistant picks the element, builds the animation and plays it in the MotionKit editor.
Whole-page animation in one prompt – say “add professional scroll animations to this page” and the assistant reads the page’s sections, headings and card groups, then animates each one with consistent, calm timing.
Edit with words – “make it slower”, “change the easing”, “scrub it with the scroll”. The assistant changes the animation you already have instead of stacking new ones.
Real GSAP, fully editable – everything the AI builds is a normal MotionKit animation. See it on the timeline, fine-tune any setting by hand and save it to your library.
Uses the editor’s own rules – the AI works through the same validated commands as the editor, so it can only make changes you could make yourself, and every change shows in the live preview.
Works with your favourite AI – Claude (claude.ai, Claude Desktop and Claude Code), ChatGPT and other MCP clients connect with one URL and your MotionKit sign-in.
Connect an AI assistant in three steps:
05In Claude, open Settings → Connectors → Add custom connector . In another MCP client, add a remote MCP server.
06Enter the MotionKit MCP URL https://editor.motionkit.io/mcp and sign in with your Mo
See it in action
Screenshots & previews.
The MotionKit visual editor animating a live preview of a WordPress page.Connecting your site to MotionKit from the WordPress dashboard.The preset library with 95+ text, image, scroll, flip, SVG and physics animations.The Tools tab for managing saved animation data.MotionKit – Visual GSAP Animation Builder for Elementor, Divi, Bricks & More screenshot 5MotionKit – Visual GSAP Animation Builder for Elementor, Divi, Bricks & More screenshot 6
02 / Source details
Gettingstarted.
01In your WordPress dashboard go to Plugins → Add New , search for MotionKit and click Install Now , or upload the plugin ZIP file.
02Click Activate .
03Open the MotionKit menu and click Connect to link your site with your MotionKit account (free to create).
04Click 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.
03 / Source details
Frequently asked questions.
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.
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.
How do I connect Claude or ChatGPT to MotionKit?
Add MotionKit as a remote MCP server in your AI assistant using https://editor.motionkit.io/mcp , then sign in with your MotionKit account. In Claude this is Settings → Connectors → Add custom connector. Open your page in the MotionKit editor and ask the assistant to animate it, for example “add a smooth scroll reveal to every section”.
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.
Website LLMs.txt and LLMs-Full.txt Generator is an LLMs.txt generator and llms-full.txt generator for WordPress. It helps site owners generate, manage, preview, validate, and serve AI discovery files from published public content. Use it to create structured /llms.txt and optional /llms-full.txt end
EngageDock AI is a customizable floating contact widget for WordPress websites that want more leads and faster visitor communication. It helps small businesses turn website traffic into calls, texts, emails, and callback requests from one clean contact panel. Key Features: Click-to-Call – One tap ca
Altify AI is an auto ALT text and AI ALT text plugin for WordPress images. It helps generate descriptive image ALT text for accessibility and image SEO. Use bulk image ALT text tools for your Media Library, generate featured image ALT text automatically, and scale WooCommerce image ALT updates with
The Accepted Payment Methods plugin is a straightforward, lightweight solution that enhances your website by displaying visually appealing icons of the payment methods you accept. This plugin is ideal for a variety of websites, including e-commerce platforms, service-oriented websites, and informati
