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

Interactive Gradients

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

Default stateViolet animated stateOrange static state

JS
HTML
CSS

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