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 https://youtu.be/IS3746Wjojc 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. https://youtu.be/2O07cYvhUp0 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.

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.

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.