Animating Gutenberg Blocks: Two Approaches

Adding a little motion to your content can work miracles by literally making it “pop-out”. As with other functionalities there are several plugins that will allow you to add CSS animations using shortcodes, but they can be a little clunky to use. Seeing this feature translated into Gutenberg blocks is really interesting.

I have found several plugins that help animate blocks, and noticed they use two main approaches: The Container and the Extra Settings Panel.

The Container

This first approach has the advantage of being more flexible when it comes to grouping or modifying any animations, as you can easily drag/drop blocks in or out of existing animated containers.

The drawback is that it creates additional markup and that it can be harder to discover as well as contribute to the clutter in the blocks directory. Here are a couple of plugins that follow this path:

Animated Blocks by Virgiliu Diaconu

Animated Blocks

This plugin creates a new block under “Layout Elements” that works as a container where you can insert any other blocks and assign an animation to them.

• 

• 

Here is the block in action:

Animation Block by sketchbookkeeper

Animation Block

This second block works similarly to the previous one, but comes under “Common Blocks” and has more settings, including one for the z-index value and the possibility to choose if the animation should repeat every time it comes into the viewport (“reset animation”).

Also, it was updated just a couple of months ago, while the first block was updated over 8 months ago which, in Gutenberg’s standards, is a long time. In fact this plugin is almost the exact same as the one before which makes me think it is probably a fork.

Here is the block in action:

The Extra Settings Panel

Blocks Animation: CSS Animations for Gutenberg Blocks

This last plugin is different in the sense that it adds a new panel instead of a container, making it more of an extension in functionality rather than a new block.

I like the simplicity of this approach a lot. It saves the need to add extra markup, reduces the need to add new blocks to the directory and makes it easier to discover and to use for the average user.

I am animated but I do not need an extra container!

There are also two block collections that offer animations as an additional feature, Ghost Kit and Kioken Blocks.