Open No-Code Kit

Plugins for animation in WordPress: "Blocks Animation" and "Animations for Blocks"

(Note: I'm not affiliated with any of the mentioned products or companies.)

Although my needs for animation in WordPress are limited I wanted to be able to apply some simple animations to some of the blocks on my pages.

After browsing through the available animation plugins I tried out two that seemed most promising (parameters that helped me decide, as always are: a decent number of installs, being recently updated and being highly rated). These were Blocks Animation: CSS Animations for Gutenberg Blocks by Themeisle and Animations for Blocks by websevendev.

I had also installed Otter blocks, also by Themeisle but I later realized that both this plugin and Blocks Animation do the same thing when it comes to animations. I disactivated them alternately but the settings I applied in one were somehow passed to the other one so I imagine they both work with the same files in the background.

Blocks Animation

Blocks Animation offers a lot of different kinds of animations that can be applied to blocks. The main ones are:
- backing
- bouncing
- fading
- flipping
- rotating
- sliding
- zooming
- light speed
For all of these some additional settings, such as direction, can be chosen. There are also some other effects such as swing, wobble, jello and more.

Four main parameters that can be controlled are: delay, speed, play on hover and offset.

Animations for Blocks

Animations for Blocks, on the other hand, provides fewer types of animation:
- fade
- flip
- slide
- zoom

However, these can be more finely tuned. Apart from delay and speed, the number of plays can be set to one ("animate only once, when scrolling down for the first time.") and the effect can also be mirrored ("animate out after scrolling past the element and in when scrolling up again.") In addition, there are 20 different types of easing that can be applied and and the placement can be chosen out of 9 possible settings ("defines which position of the element regarding to window should trigger the animation.").

Although I find animations distracting and believe they should be used minimally (if at all) I decided to go with both of the plugins since they can be applied simultaneously on one block which provides for even better customization when one is needed.

Thoughts? Leave a comment