guelben

MotionMagic enhances Gutenberg adding beautiful CSS animations to any block. Easily add on scroll, on hover and on click animations.
Fully compatible with any template kit for Gutenberg like spectra, stackable, otter, kadence, qubely etc..
When the user selects an animation from the Gutenberg editor interface, they can see the effect on the same screen in the inspected block, allowing them to preview how the animation will appear on the front end. The plugin ensures that all animations do not interfere with each other. In fact, the same block can have all three types of animations defined.

MotionMagic

MotionMagic enhances Gutenberg adding beautiful CSS animations to any block. Easily add on scroll, on hover and on click animations.

eleopard

Add cool CSS3 animations to your content.
<a href="https://eleopardsolutions.com/animate-it-documentation-wordpress/" title="Demo" rel="nofollow ugc">Demo</a> | <a href="https://eleopardsolutions.com/animate-it-documentation-wordpress/" title="Documentation" rel="nofollow ugc">Documentation</a> | <a href="https://eleopardsolutions.com/animate-it-class-generator/" title="Class Generator" rel="nofollow ugc">Class Generator</a>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/JKRn6NUM-i4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
Some of the Key features Include:
<ul>
<li>Allowing user to apply CSS3 animations on Post, Widget and Pages.</li>
<li>50+ Entry, Exit and Attention Seeker Animations.</li>
<li>Capability to apply animation on Scroll.</li>
<li>Capability to add different scroll offset on individual animation blocks.</li>
<li>Capability to apply animation on Click.</li>
<li>Capability to apply animation on Hover.</li>
<li>Providing delay feature in animation to create a nice animation sequence.</li>
<li>Providing feature to control the duration for a more precise animation.</li>
<li>Providing a button in the editor to easily add an animation block in the article or post.</li>
<li>Allow user to add animation on WordPress widgets. Use <a href="https://eleopardsolutions.com/animate-it-class-generator/" rel="nofollow ugc">Class Generator</a> to generate the required animation classes. </li>
<li>Allow user to apply animation infinitely or any fixed number of times.</li>
<li>Option to add custom CSS classes to individual animation block.</li>
<li>Options to enable or disable animations on Smartphones and Tablets.</li>
<li>Spanish and German language support. Thanks to Santiago Marrone, Christian Herrmann </li>
<li>Custom Animate It! block to apply animations on other Gutenberg blocks.</li>
</ul>
All the CSS3 animations are from <a href="http://daneden.github.io/animate.css/" title="Animate.css" rel="nofollow ugc">Animate.css</a> and <a href="http://labs.bigroomstudios.com/libraries/animo-js" title="Animo.js" rel="nofollow ugc">Animo.js</a>

Animate It!

Add cool CSS3 animations to your content.

MotionMagic vs Animate It!