
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.