Basic gradients animation

Ref :  https://sarcadass.github.io/granim.js/examples.html

JS:

var granimInstance = new Granim({
    element: '#canvas-basic',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#AA076B', '#61045F'],
                ['#02AAB0', '#00CDAC'],
                ['#DA22FF', '#9733EE']
            ]
        }
    }
});

HTML:

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

CSS:

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

Result

========================================================================

Radial gradients animation

Radial gradients animation with 3 gradients in queue composed of 2 colors.

JS:

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

HTML:

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

CSS:

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

Result :  

Gradients with an image

Gradients with 3 colors, different opacity and a background image.

Interactive Gradients

Create a gradients animation that responds to events.
Click on the different states in the gradient animation to see the gradients change.