Darshan Patel

<p>MotionCraft Scroll Animations adds smooth, scroll-triggered animations to any WordPress site. Apply animations with CSS classes, data attributes, or the Gutenberg block editor sidebar.</p>
<p>Built for performance and flexibility, the plugin uses lightweight animation techniques and Anime.js to create modern motion effects without slowing down your website.</p>
<h4>Features</h4>
<ul>
<li>6 built-in animation presets (fade, slide, zoom)</li>
<li>Gutenberg block editor integration with sidebar controls</li>
<li>Works with Elementor via CSS classes in the Advanced tab</li>
<li>Stagger animations for lists and grids</li>
<li>Timeline groups for sequenced animations</li>
<li>Custom animation builder (JSON-based)</li>
<li>Conditional loading and mobile disable options</li>
<li>Respects <code>prefers-reduced-motion</code></li>
<li>Developer hooks and filters for extending functionality</li>
<li>Lightweight and performance-focused architecture</li>
</ul>
<h4>Usage</h4>
<p>Add a CSS class to any element:</p>
<pre><code>anime-fade-up
</code></pre>
<p>Or use a data attribute:</p>
<pre><code>data-anime="fade-up"
</code></pre>
<p>The animation triggers automatically when the element scrolls into view.</p>
<h4>Custom Animations</h4>
<p>Define custom presets as JSON in:</p>
<p>Settings > MotionCraft</p>
<p>Example:</p>
<pre><code>{ "slide-rotate": { "opacity": 0, "translateX": -60, "rotate": -15 } }
</code></pre>
<h4>Compatibility</h4>
<ul>
<li>Elementor (Free and Pro)</li>
<li>Gutenberg Block Editor</li>
<li>Any modern WordPress theme</li>
</ul>
<h4>Performance</h4>
<ul>
<li>Deferred script loading</li>
<li>Scroll-triggered animations via IntersectionObserver</li>
<li>Optional mobile disable</li>
<li>No external CDN dependencies</li>
</ul>
<h4>For Developers</h4>
<ul>
<li>Extendable animation list via <code>mcsa_supported_animations</code> filter</li>
<li>Public API: <code>window.MCSA.refresh()</code> for dynamic content</li>
<li>All assets bundled locally</li>
</ul>
<h3>Third-Party Services</h3>
<p>This plugin includes the Anime.js library locally (MIT licensed).</p>
<h4>Anime.js</h4>
<ul>
<li>License: MIT</li>
<li>Source: https://animejs.com</li>
<li>Purpose: Provides the lightweight animation engine used by this plugin.</li>
<li>Data transmitted: None. No external requests are made. All assets are bundled locally.</li>
<li>MIT License: https://opensource.org/licenses/MIT</li>
</ul>


MotionCraft Scroll Animations

Add smooth, scroll-triggered animations to WordPress with CSS classes or Gutenberg block controls.

WPXERO

<p><strong>ExtenderX adds Gutenberg block animations and scroll effects to every block in the Block Editor</strong> — core WordPress blocks and third-party block libraries alike. No replacement blocks. No shortcodes. Open the block sidebar, pick an animation preset, and publish.</p>
<p>Animate blocks on scroll with <strong>entrance animations</strong>, add continuous <strong>floating motion</strong>, apply <strong>3D tilt on hover</strong>, control <strong>device visibility</strong>, add <strong>tooltips</strong>, and wrap blocks with <strong>wrapper links</strong> — all from a single <strong>ExtenderX</strong> panel inside Gutenberg.</p>
<h3>Why Use ExtenderX for Block Animations?</h3>
<p>Most animation plugins only work with their own blocks. ExtenderX extends <strong>the blocks you already use</strong> — including Kadence Blocks, Spectra, Stackable, Essential Blocks, Ultimate Blocks, Ghostkit, Greenshift, Otter Blocks, and more.</p>
<ul>
<li><strong>6 animation & interaction types</strong> in one block sidebar panel</li>
<li><strong>Scroll-triggered entrance animations</strong> with duration, delay, and easing controls</li>
<li><strong>No coding required</strong> — configure everything visually in the editor</li>
<li><strong>Conditional asset loading</strong> — animation scripts load only when a block uses them</li>
<li><strong>Works with any theme</strong> — no page builder lock-in</li>
</ul>
<p><strong>Ready for advanced motion? <a href="https://wpxero.com/plugins/extenderx/pricing" rel="nofollow ugc">Upgrade to Pro</a></strong> for parallax, custom CSS/JS per block, seasonal effects, and marketing tools.</p>
<h3>How Block Animations Work</h3>
<ol>
<li><strong>Activate ExtenderX</strong> and enable <strong>Gutenberg Block Extensions</strong> from the dashboard.</li>
<li><strong>Edit any page or post</strong> in the Block Editor.</li>
<li><strong>Select a block</strong> and open the right sidebar.</li>
<li><strong>Open the ExtenderX panel</strong> and choose entrance, floating, tilt, visibility, tooltip, or wrapper link settings.</li>
</ol>
<p>Your animations appear on the frontend immediately after publishing.</p>
<h3>Gutenberg Block Animations (Free)</h3>
<p><strong>✅ Entrance Animations (Scroll Effects)</strong><br />
Make blocks <strong>animate on scroll</strong> with fade in, slide up, zoom in, flip, bounce, and more. Customize duration, delay, and easing. Animations trigger when blocks enter the viewport — perfect for landing pages, portfolios, and storytelling layouts.</p>
<p><strong>✅ Floating Animations</strong><br />
Add subtle, continuous <strong>floating motion</strong> to any block. Ideal for hero sections, testimonials, and promotional banners.<br />
<strong>Note:</strong> Floating animations do not run simultaneously with Entrance or Tilt on the same block.</p>
<p><strong>✅ 3D Tilt Effect</strong><br />
Blocks respond to cursor movement with GPU-accelerated <strong>3D tilt</strong> powered by VanillaTilt.js. Great for cards, images, pricing tables, and portfolio items.</p>
<p><strong>✅ Responsive Visibility Control</strong><br />
Show or hide any block on <strong>desktop</strong>, <strong>tablet</strong>, or <strong>mobile</strong> independently using clean CSS — no duplicate content required.</p>
<p><strong>✅ Tooltips</strong><br />
Add hover <strong>tooltips to any Gutenberg block</strong> powered by Tippy.js for accessible, smooth rendering.</p>
<p><strong>✅ Wrapper Links</strong><br />
Turn <strong>any Gutenberg block into a clickable link</strong> — wrap images, groups, columns, and cards with a custom URL.</p>
<h3>Block Library Compatibility</h3>
<p>ExtenderX extends the Gutenberg editor itself, not individual block plugins. Tested with:</p>
<ul>
<li>Kadence Blocks</li>
<li>Spectra (UAG)</li>
<li>Stackable</li>
<li>Essential Blocks</li>
<li>Ultimate Blocks</li>
<li>Ghostkit</li>
<li>Gutenverse</li>
<li>GutenKit</li>
<li>Otter Blocks</li>
<li>Greenshift</li>
<li>CoBlocks</li>
<li>GenerateBlocks</li>
<li>All core WordPress blocks</li>
</ul>
<h3>Bonus Site Tools (Also Included Free)</h3>
<p>ExtenderX also includes optional site-wide tools you can enable from the dashboard — separate from block animations:</p>
<p><strong>Dark Mode</strong> — visitor toggle powered by DarkReader, works with any theme.</p>
<p><strong>Content Protection</strong> — disable right click, copy/paste, inspect element, and image drag.</p>
<p><strong>UI Enhancements</strong> — back to top, sticky header, sticky footer, scroll progress bar, smooth scrolling, scrollspy, hide admin bar.</p>
<p>Enable only what you need. Each feature loads conditionally.</p>
<h3>ExtenderX Pro</h3>
<p><strong>Pro unlocks advanced motion and site tools:</strong> parallax effects, custom CSS/JS per block, scrollbar styler, custom cursor effects, seasonal visual effects (14), marketing tools, site modes (maintenance, coming soon, cookie consent, GDPR), and advanced appearance modes.</p>
<p><a href="https://wpxero.com/plugins/extenderx/pricing" rel="nofollow ugc">View Pro pricing <span aria-hidden="true" class="wp-exclude-emoji">→</span></a></p>
<h3>License & Disclaimer</h3>
<p>This plugin is licensed under GPL v2 or later. No warranties are provided. You are free to modify and distribute it under the same license.</p>


Block Animations, Scroll & Motion Effects by ExtenderX

Add Gutenberg block animations and scroll effects to any block — entrance, floating, 3D tilt, visibility, tooltips, and wrapper links.

MotionCraft Scroll Animations vs Block Animations, Scroll & Motion Effects by ExtenderX