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.

Ivan Maljukanović

<p>Accentuate most important elements on your website through animation – either when its entering the screens viewport or when its hovered on/tapped on touchscreen (using CSS selectors). It includes more than 70 types of animation (from animate.css library), and provides option to set the animation duration, number of repetitions, speed curve, delay, as well as the option to trigger animation repeatedly every time the selected items enter screens viewport.</p>
<p>Key Features:<br />
* Possibility to set the number of animation groups that you can target with different animation settings (up to 100 groups).<br />
* Add the items (CSS selectors) you would like to either animate when they enter the screens viewport (visible area of a web page) or when hovered on/tapped on.<br />
* Select the type of animation for that group of items (over 70 types, based on the popular CSS library animate.css).<br />
* Option to select the duration of the animation (0.5 – 5 sec; with increments of 0.1 sec).<br />
* Option to select the repetition of the animation (1 – 5 times; Infinite is also an option).<br />
* Option to choose the delay duration of animation when entering screens viewport (0.5 – 5 sec; with increments of 0.1 sec).<br />
* Option to choose the speed curve of the selected animation.<br />
* Option to choose if the animation will be triggered every time selected items enter screens viewport (not just once). There is also an option to trigger animation on hover/when tapped on touchscreen instead.<br />
* Use the preview button to check all of the choosen options in action.</p>
<h3>Copyright</h3>
<p>Animations by Imoptimal Plugin, Copyright 2019 Ivan Maljukanovic<br />
Animations by Imoptimal is distributed under the terms of the GNU GPL</p>
<p>You should have received a copy of the GNU General Public License<br />
along with this program.  If not, see <a href="https://www.gnu.org/licenses/gpl-3.0.en.html/" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-3.0.en.html/</a></p>
<h3>Resources</h3>
<ul>
<li>animate.css 3.7.2, MIT – available @ https://daneden.github.io/animate.css/</li>
<li>imoptimal-logo-white.png © 2020 Ivan Maljukanović, CC0 – made by me, not available online apart from the plugins directory /img, and my personal website @ https://imoptimal.com (used as an asset)</li>
<li>banner-772×250.png © 2020 Ivan Maljukanović, CC0 – made by me, not available online apart from the plugins official wordpress.org repository (used as an asset)</li>
<li>icon-256×256.png © 2020 Ivan Maljukanović, CC0 – made by me, not available online apart from the plugins official wordpress.org repository (used as an asset)</li>
</ul>


Animations by Imoptimal

Accentuate most important elements on your website through animation - either when its entering the screens viewport or when its hovered on/tapped on  …

Animation Block vs Animations by Imoptimal