MotionKit – Visual GSAP Animation Builder for Elementor, Divi, Bricks & More

外掛說明

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

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 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 · 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

Image animations (14)
Image Reveal · Image Fade · Image Scale-In · Image Skew In · Image Flip · Cinematic Mask · Image Polygon Reveal · Image Aperture Reveal · Image Zoom Tunnel Reveal · Image 3D Move X-Axis · Image 3D Move Y-Axis · Image Scale With Scroll · Image Stretch With Scroll · Stagger Diagonal Reveal

Scroll and interaction effects (14)
Horizontal Scroll · Header Sticky · Hover Reveal · Hover Magnifier · 3D Tilt · Cursor Move · Cursor Reveal · Spotlight Reveal · Color Swipe Reveal · Cube Reveal · Slice Shutter · Mosaic Depth · Video Frame · Media Popup

Container and stagger animations (6)
Stagger Fade Up · Stagger Blur In · Stagger Clip Reveal · Stagger Unfold · Stagger Tilt Drop · Stagger Scale Pop

Pin, sticky and stacked card scroll effects (6)
Pin Sticky Sections
Stacked Card Scroll

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.

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

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 | Privacy Policy | Source code

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/.