Canvas Based Interactive Gradients Animation Library – Granim.js

Category: Animation , Color , Javascript , Recommended | September 5, 2016
Author: sarcadass
Views Total: 1,885
Official Page: Go to website
Last Update: September 5, 2016
License: MIT


Canvas Based Interactive Gradients Animation Library – Granim.js


Granim.js is a lightweight, dependency-free JavaScript library which helps create configurable, interactive gradients animations on an HTML5 canvas element.

How to use it:

Create an HTML5 canvas element where you want to create the gradients animation.

<canvas id="canvas-demo"></canvas>

Insert the minified version of Granim.js script into your html page.

<script src="dist/granim.min.js"></script>

The JavaScript to create a basic gradients animation on the canvas element.

var granimInstance = new Granim({
    element: '#canvas-demo',
    states : {
      "default-state": {
          gradients: [
              ['#485563', '#29323c', '#29323c'],
              ['#00c6ff', '#0072ff', '#0072ff']
          transitionSpeed: 10000

All default configuration options.

var granimInstance = new Granim({

    // CSS selector of canvas element
    element: '',

    // whether to add a dark / light class on the body depending on the gradient lightness, the class will be updated during the animation. 
    // If you don't set a name, the class won't be set.
    name: false,

    // The element to set the dark / light class on
    elToSetClassOn: 'body',

    // diagonal', 'left-right' or 'top-bottom'
    direction: 'diagonal',

    // pause animation when out of view
    isPausedWhenNotInView: false,

    // opacity of each color of the gradient
    opacity: '',

    //  Object containing all the states
    states: '',

    // transition speed
    stateTransitionSpeed: 1000


API methods:

// Change state by putting its name in the argument

// Play the animation;

// Pause the animation

// Stop the animation and clear the gradient

Callback functions.

var granimInstance = new Granim({

    // Triggered when the animation start.
    onStart: false, 

    // Triggered when a gradient change and loop.
    onGradientChange: false,

    // Triggered when the animation end.
    onEnd: false


Events available

  • granim:start
  • granim:end
  • granim:loop
  • granim:gradientChange
var canvasElement = document.querySelector('#canvas-demo');
canvasElement.addEventListener('granim:start', function(event) {
  • Aki

    No doubt, it is best additions in gradients animations.