Animation

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

Examples

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

Customisation

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.