So as it seems, you start looking at gradients. Then, out of the blue you find what you need. All of a sudden after your contempt with what you have… you find yet another solution.

Granim.js is a tiny JavaScript library, from the Github user sarcadass which can help you with all your animated gradient needs.

These include:

  • Basic Gradients
  • Radial Gradients
  • Image Gradients (With opacity)
  • Image Masks (overlay images with gradients, great for text images.)
  • Interactive Gradients

That’s quite a lot for a tiny library.

Usage is pretty much the same as any other library. Include the .js file and call the right methods.

Below is a quick example of a Basic radial gradient:

Example

First of all we have the basic styling. This will just enable the canvas to take up the whole of the view-port.

#canvas-radial {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Next is the html. All we need to do is include the library and display the canvas.

<script src="path-to/Granim.js"></script>
<canvas id="canvas-radial"></canvas>

Finally where all the magic happens. The JavaScript:
Firstly we are creating a new referable instance of the Granim object. We are then initializing all the variables we want. A simple dash of colour codes and we are done.

var granimInstance = new Granim({
    element: '#canvas-radial',
    name: 'radial-gradient',
    direction: 'radial',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#333333', '#666666'],
                ['#83a4d4', '#b6fbff'],
                ['#9D50BB', '#6E48AA']
            ]
        }
    }
});
</script>

Luckily like any great developer, there is some pretty documentation available to help you with the features available.

This is a still of a nice gradient overlay produces by Granim.js

This is a still of a nice gradient overlay produces by Granim.js

A full list of all the examples above can be found here

Even though being another post in such a short amount of time about gradients, this definitely caught my eye. I feel there must be a way to mix this with Grade and will be certainly something I will look into.

Thanks for reading and have a great day!