Paul Allen

<p>Use the power of animate.css to animate Gutenberg blocks as they enter the viewport.</p>
<p>Just add an Animation Block ► and then put any blocks to be animated into the Animation Block.</p>
<h4>Main Features:</h4>
<ul>
<li>Animations from the Animate.css library.</li>
<li>Delay and Speed options.</li>
<li>Control Animation frequency.</li>
<li>Block z-index option.</li>
</ul>
<h4>Usage</h4>
<p><iframe loading="lazy" title="Gutenberg Animation Block" width="750" height="422" src="https://www.youtube.com/embed/dfhHUBwM-jU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p><a href="https://www.youtube.com/watch?v=dfhHUBwM-jU" rel="nofollow ugc">View Guide on YouTube</a></p>


Animation Block

Pretty neat!

Use the power of animate.css to animate Gutenberg blocks as they enter the viewport.

David Foreman

Aaron Jones

Toast Plugins

<h3>Animation Builder – Complex scroll-triggered animation with no coding required.</h3>
<p>Animation Builder lets you craft everything from subtle transitions to complex, multi-stage scroll-triggered animations — all within a modern, familiar interface.</p>
<p>With intuitive controls and powerful features, you can build animations that respond to triggers, follow logical rules, and combine seamlessly to create a rich, interactive experience on your website — all with a fraction of the effort typically required.</p>
<h3>Features</h3>
<p><strong>Scroll triggered</strong> – All animations respond to your scrolling, activating only when visible in the browser to ensure nothing is missed and performance remains smooth.<br />
<strong>Lightweight & performant</strong> — Minimal footprint, optimized for fast, smooth animations.<br />
<strong>Powered by GSAP Animation Framework</strong> — Built on the industry-standard animation engine for reliable, high-performance animations.<br />
<strong>Zero-config defaults</strong> — works straight out of the box.<br />
<strong>Beginner-friendly</strong> — no coding knowledge required.</p>
<h3>The 4 types of animation included within Animation Builder</h3>
<p>Animation Builder is designed to make animations effortless for everyone — whether you’re a seasoned developer or someone who has never touched JavaScript. With multiple ways to create and trigger animations, you have complete freedom to choose the approach that works best for you.</p>
<p><strong>1. Simple Animation Builder</strong><br />
A clean, visual interface for creating smooth, single-step transitions. Ideal for quick enhancements when you need movement without complexity.</p>
<p><strong>2. Advanced Timeline Builder</strong><br />
The heart of Animation Builder — a full-fledged timeline editor that lets you design professional, multi-stage animations with precision and control. No coding required, just creativity and a bit of animation logic.</p>
<p><strong>3. Ready-to-Use CSS Classes</strong><br />
Instantly add motion to any element with our library of predefined CSS animations. Perfect for quick effects that grab attention — no setup required.</p>
<p><strong>4. Legacy Activations</strong><br />
A tried-and-true method for scroll-based effects. Elements activate as they enter the viewport, enabling elegant CSS transitions between states — great for subtle, performance-friendly animations.</p>
<h3>Benefits</h3>
<p><strong>Attract Users to Key Areas</strong> – Apply animations strategically to highlight the sections that matter most.<br />
<strong>Improves engagement</strong> – studies show that web animations can improve “time on page” by up to 15%.<br />
<strong>Increase Credibility</strong> – Polished, purposeful animations can make your website appear more credible.</p>
<p>Full documentation can be found <a href="https://www.toastplugins.co.uk/docs/animation-builder/" rel="nofollow ugc">here</a></p>


Animation Builder – An interface for adding scroll-triggered animations

Complex scroll-triggered animations. No coding required.

Animation Block vs Animation Builder – An interface for adding scroll-triggered animations