Original we built animation into our theme with Wow.js and Animate.css, adding a class to a block etc, but now there is a great plugin that does all of this, so we are just using it!

The plugin is called ‘Blocks Animation: CSS Animations for Gutenberg Blocks

Types of animation available are found here on animate.css


Fade in up, 200 Milliseconds delay, Speed Faster.

Zoom In, 1 Second delay, Speed Slow.

Jack in the box, 3 Second delay, Speed Slow. Infinite class added


To customise the CSS you add something like this to the theme styles:

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  to {
    opacity: 1;
    transform: none;

Note: the above example changes the default distance (50px) that the animation happens from.

Search the site


123 Main Street
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899


Copyright 2023. Blah blah blah Company Limited