Add cool CSS3 animations to your content.

guelben

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>

Alternatives to Animate It!

Top alternatives