Gradients animation in Genesis using Granim.js

Granim is a lightweight Javascript library for animating gradients. In this tutorial, we are going to set it up as a background of a custom Home Hero widget area below the header on the front page in Genesis.

Note: The actual animation will be smoother unlike what got captured in the below screencast. See the examples page for a realistic idea.

Step 1

Upload granim.min.js to child theme's js directory.

Create a file named say, granim-init.js in the same location having this code: