Examples Basic gradient animation Basic gradients animation with 3 gradients in queue composed of 2 colors. JS

HTML

CSS var granimInstance = new Granim({ element: '#canvas-basic', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ ['#ff9966', '#ff5e62'], ['#00F260', '#0575E6'], ['#e1eec3', '#f05053'] ] } } }); <canvas id="canvas-basic"></canvas> #canvas-basic { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }

Complex gradient animation Complex gradient animation with 2 gradients in queue with different positions composed of 3 colors. JS

HTML

CSS var granimInstance = new Granim({ element: '#canvas-complex', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ [ { color: '#833ab4', pos: .2 }, { color: '#fd1d1d', pos: .8 }, { color: '#38ef7d', pos: 1 } ], [ { color: '#40e0d0', pos: 0 }, { color: '#ff8c00', pos: .2 }, { color: '#ff0080', pos: .75 } ], ] } } }); <canvas id="canvas-complex"></canvas> #canvas-basic { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }

Gradient animation with an image and blending mode Gradient animation with 2 colors, a background image and a blending mode set.

More parameters for options.image are available in the API page. JS

HTML

CSS var granimInstance = new Granim({ element: '#canvas-image-blending', direction: 'top-bottom', isPausedWhenNotInView: true, image : { source: '../assets/img/bg-forest.jpg', blendingMode: 'multiply' }, states : { "default-state": { gradients: [ ['#29323c', '#485563'], ['#FF6B6B', '#556270'], ['#80d3fe', '#7ea0c4'], ['#f0ab51', '#eceba3'] ], transitionSpeed: 7000 } } }); <canvas id="canvas-image-blending"></canvas> #canvas-image { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }

Gradients with an image mask Gradient animation with an image mask to create a gradient animation under a shape.

Look at the logo on the left of the header. Granim.js JS

HTML

CSS var granimInstance = new Granim({ element: '#logo-canvas', direction: 'left-right', states : { "default-state": { gradients: [ ['#EB3349', '#F45C43'], ['#FF8008', '#FFC837'], ['#4CB8C4', '#3CD3AD'], ['#24C6DC', '#514A9D'], ['#FF512F', '#DD2476'], ['#DA22FF', '#9733EE'] ], transitionSpeed: 2000 } } }); <div class="bloc-logo"> <canvas id="logo-canvas"></canvas> <a href="index.html" class="logo-mask">Granim.js</a> </div> .bloc-logo { position: relative; width: 130px; height: 49px; float: left; }

.bloc-logo canvas, .bloc-logo .logo-mask { display: block; width: 130px; height: 49px; }

.bloc-logo .logo-mask { position: absolute; top: 0; left: 0; background-size: 130px; background-image: url("../img/logo-mask.png"); text-indent: -9999px; }