# 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 state Violet animated state Orange 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;
    }