ska-dev

websevendev

Lightweight plugin that adds additional inspector controls to block editor blocks that allow to animate the block once it becomes visible to the user during scrolling. The controls can be used to select an animation type (fade, flip, slide, zoom), variation (different directions), as well as delay, duration and more advanced settings. Upon changing an option the animation can be immediately previewed in the editor.
<a href="https://playground.wordpress.net/?plugin=animations-for-blocks&url=%2Fwp-admin%2Fpost.php%3Fpost%3D2%26action%3Dedit" rel="nofollow ugc">Demo</a>
This plugin uses <a href="https://github.com/michalsnik/aos" rel="nofollow ugc">AOS – Animate on scroll library</a> and adds its’ stylesheet (2.8 kB) and script (5.2 kB) to the front end as well as a script that initializes the animations (1.3 kB).

Animations for Blocks

I have used several plugins that offer animation blocks or similar. This one is the most straight forward Animate On Scroll wrapper for wordpress blocks.

Simple. That's why it's good.

I'm a bit of an "old school" developer and have been struggling to fully embrace Gutenberg/Block Editor.

I'm building a new Block Editor base theme for use on my client projects, and I wanted to include AOS. I was preparing to add the library directly in my plugin and trying to figure out how I would ever get it to seamlessly integrate into the Block Editor interface… and then I found this plugin!

It is perfect. It includes all of the AOS parameters, works on virtually any block (even nested blocks), and most important to me, it looks like it belongs in the Block Editor. Speaking as a plugin developer as well, I can't stand plugins that try to imprint their own UI elements all over WordPress. If you're adding something to WordPress, make it look like WordPress. Anything else is at best distracting, and at worst, confusing to end users.

This one is perfect. I won't spend another second trying to integrate AOS directly into my theme… I'll just install this plugin on any site that needs animation! Very well done, and I hope the user base grows so the devs can continue to support it.

This is how you do it.


Finally an easy to use block animation plugin! Thank you so much.


Amazing plugin!


I was considering building such plugin myself, but it is already made! Thanks to developers!Please update compatibility, people will not install this if they don't see compatibility with newest WordPress


Great plugin

Allows to add animations to block editor blocks on scroll.

Ivan Maljukanović

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.
Key Features: 
* Possibility to set the number of animation groups that you can target with different animation settings (up to 100 groups). 
* 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. 
* Select the type of animation for that group of items (over 70 types, based on the popular CSS library animate.css). 
* Option to select the duration of the animation (0.5 – 5 sec; with increments of 0.1 sec). 
* Option to select the repetition of the animation (1 – 5 times; Infinite is also an option). 
* Option to choose the delay duration of animation when entering screens viewport (0.5 – 5 sec; with increments of 0.1 sec). 
* Option to choose the speed curve of the selected animation. 
* 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. 
* Use the preview button to check all of the choosen options in action.
<h3>Copyright</h3>
Animations by Imoptimal Plugin, Copyright 2019 Ivan Maljukanovic 
Animations by Imoptimal is distributed under the terms of the GNU GPL
You should have received a copy of the GNU General Public License 
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>
<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  …

Animations for Blocks vs Animations by Imoptimal