The Best Gradient Animations in JS

A tool to create gradient animations on your website. Top Level Tool for CSS Gradients

Tweet
Share
Share
Pin

I found a really cool tool to do gradient animations with good documentation. 

Let me show you how easy it is to get started. 

1) Download Granim.js

2) For JS Use the Following

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

3) For HTML Use the Following

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

4) For CSS Use the Following

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

For More Examples and Documentation Visit: https://sarcadass.github.io/granim.js/index.html