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.

Adam Pery

<p>Motion WordPress Plugin based on Motion UI by ZURB – a Sass library for creating CSS transitions and animations.<br />
Provide user friendly solution to beautiful CSS3 animations on WordPress Posts, Pages and Widgets.</p>
<p><a href="http://motion.tadam.co.il/" rel="nofollow ugc">Motion Demo</a></p>
<p><iframe loading="lazy" title="Motion WordPress Plugin" width="750" height="422" src="https://www.youtube.com/embed/8QMMndMZOCE?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>Some of the Key features Include:</p>
<ul>
<li>CSS animations</li>
<li>CSS transitions</li>
<li>Allowing user to apply CSS3 animations on WordPress Posts, Pages and Widgets</li>
<li>Animation on Scroll, bases on wow.js</li>
<li>Different scroll offset on individual animation blocks</li>
<li>Delay to create a nice animation sequence</li>
<li>Animation duration</li>
<li>Enable or disable animations on mobile</li>
<li>Enable or disable checking for new elements on the page</li>
<li>Custom box class setting</li>
<li>Custom animate class setting</li>
<li>Custom CSS setting</li>
<li>Allow users to apply animation on WordPress Widgets</li>
</ul>
<p>All the CSS3 animations are from <a href="https://github.com/zurb/motion-ui" title="Motion UI" rel="nofollow ugc">Motion UI</a><br />
WOW.js are from <a href="https://github.com/matthieua/WOW" title="WOW" rel="nofollow ugc">WOW</a></p>
<h3>Arbitrary section</h3>
<h3>A brief Markdown Example</h3>
<p>[motion data-animate=”slideInUp” data-speed=”slow” data-easing=”linear” data-delay=”short-delay” data-animation=”shake” data-offset=”100″ custom_class=”your_custom_class”][/motion]<br />
<a href="http://motion.tadam.co.il/" rel="nofollow ugc">Motion Demo</a></p>


Motion

Motion WordPress Plugin provide user friendly solution to beautiful CSS3 animations.

Animation Block vs Motion