Examples

Basic gradient animation

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

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.

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.

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.

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; }

Interactive Gradients

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

var granimInstance = new Granim({
    element: '#canvas-interactive',
    name: 'interactive-gradient',
    elToSetClassOn: '.canvas-interactive-wrapper',
    direction: 'diagonal',
    isPausedWhenNotInView: true,
    stateTransitionSpeed: 500,
    states : {
        "default-state": {
            gradients: [
                ['#B3FFAB', '#12FFF7'],
                ['#ADD100', '#7B920A'],
                ['#1A2980', '#26D0CE']
            ],
            transitionSpeed: 10000
        },
        "violet-state": {
            gradients: [
                ['#9D50BB', '#6E48AA'],
                ['#4776E6', '#8E54E9']
            ],
            transitionSpeed: 2000
        },
        "orange-state": {
            gradients: [ ['#FF4E50', '#F9D423'] ],
            loop: false
        }
    }
});

// With jQuery $('#default-state-cta').on('click', function(event) { event.preventDefault(); granimInstance.changeState('default-state'); setClass('#default-state-cta') }); $('#violet-state-cta').on('click', function(event) { event.preventDefault(); granimInstance.changeState('violet-state'); setClass('#violet-state-cta') }); $('#orange-state-cta').on('click', function(event) { event.preventDefault(); granimInstance.changeState('orange-state'); setClass('#orange-state-cta') });
function setClass(element) { $('.canvas-interactive-wrapper a').removeClass('active'); $(element).addClass('active'); };
<div class="canvas-interactive-wrapper">
    <canvas id="canvas-interactive"></canvas>
    <div class="cta-wrapper">
        <a href="#default-state" id="default-state-cta" class="active">Default state</a>
        <a href="#violet-state" id="violet-state-cta">Violet state</a>
        <a href="#orange-state" id="orange-state-cta">Orange state</a>
    </div>
</div>
.canvas-interactive-wrapper {
    position: relative;
    height: 300px;
    text-align: center;
}

.canvas-interactive-wrapper canvas { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }
.canvas-interactive-wrapper .cta-wrapper { margin-top: 130px; }
.canvas-interactive-wrapper .cta-wrapper a { position: relative; display: inline-block; padding: 3px 7px; border: solid 1px transparent; margin-right: 50px; z-index: 1; text-decoration: none; color: #222; transition: border .3s; }
.canvas-interactive-wrapper .cta-wrapper a.active { border-color: #222; }