How to add animations to any block in the WordPress editor

One of the many shortcomings that the WordPress block editor still has to be able to compete with layout tools like Divi or Elementor is the ability to add animations to the different blocks of the editor.

While the WordPress core development team keeps adding new blocks and colors, until they realize that this is a real need for any designer or layout designer, fortunately, we can fill this gap with a plugin.

Blocks Animation

And of all the plugins that we can add to our arsenal, one that will make a difference is Blocks Animation, a free plugin that allows you to add CSS animations to any block in the WordPress editor, no matter if it is native or collections of blocks.

As soon as you install the plugin you don’t have to do anything, it has no settings page, it simply integrates into the editor, adding animation options to the editor blocks.

blocks animation options

You have dozens of animations available, easily found through an immediate search engine. And once you have chosen an animation you can customize further settings for each one.

blokcs animation settings options

CoBlocks

If you already use the free block collection CoBlocks, one of my favorites, you may not need the plugin above, as it already includes this feature, which you can activate from the toolbar of each block.

coblocks animation settings

To make everything even easier, each animation has a preview when hovering.

As you can see, a great option, accompanied by one of the best collections of blocks for WordPress.

Animation Block

Finally, we have another free option, the Block Animation plugin, a kind of container block, in which you can put other blocks to inherit their animation, another approach for the same purpose.

animation block
animation block visual example

From there insert the block that you want inside this Animation Block. To access the animation block settings you will have to click on the green arrow on the left side of the block. Because if you click inside the block it will open the settings of the block you inserted inside the animation block.

animation block settings
Click to rate this post!
[Total: 0 Average: 0]

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top Skip to content