API

options

All the global options available.

Property Default Type Description
element (required) / String A CSS selector for the <canvas> element (e.g. '#granim-canvas') that will be used for the gradient animation.
name false String This is the prefix used for the dark / light class name added on the options.elToSetClassOn element depending on the average gradient lightness, the class will be updated during the animation. If you don't set a name, the class won't be set.
elToSetClassOn 'body' String The element to set the dark / light class on (e.g. '#canvas-wrapper'). Is useful only if you set a options.name.
direction 'diagonal' String The orientation of the gradient, you can choose between:
  • 'diagonal'
  • 'left-right'
  • 'top-bottom'
  • 'radial'
isPausedWhenNotInView false Boolean Does the animation stop when it's not in window view?
(Despite this parameter, the animation always pause when changing tab).
opacity (required) / Array of Int You can adapt the opacity of each color of the gradient.
if you have two colors [1, .5], or three [1, .5, 1]...
stateTransitionSpeed 1000 Int Duration of the animation when changing state.
defaultStateName 'default-state' String The name of the default state.
states (required) / Object Object containing all the states, see more info below.

options.states

All the options available to customize the states and the different gradients.
Create a state with the name you want then add these parameters.
By default, the name of your first state is 'default-state', you can change it with options.defaultStateName.

Property Default Type Description
gradients (required) / Array of Arrays The different gradients with the different colors e.g. [ ['#FFF', '#000'], ['#000', '#FFF'] ].
The array can contain only one gradient.
transitionSpeed 5000 Int Transition duration between each gradient.
loop true Boolean When the animation has arrived to the last gradient, does it repeat?

Callbacks

You can set callbacks.

Property Default Type Description
onStart false Function Triggered when the animation start.
onGradientChange false Function Triggered when a gradient change and loop.
onEnd false Function Triggered when the animation end.

Emitted events

Granim will emit events you can listen to at key moments.

// You can listen to these events:
// - granim:start
// - granim:end
// - granim:loop
// - granim:gradientChange

// js var canvasElement = document.querySelector('#granim-canvas'); canvasElement.addEventListener('granim:start', function(event) { console.log(event); });
// with jQuery $('#granim-canvas').on('granim:start', function(event) { console.log(event); })

Methods

Methods to control the gradients.

// Change state by putting its name in the argument
granimInstance.changeState('state-name');

// Play the animation granimInstance.play();
// Pause the animation granimInstance.pause();
// Stop the animation and clear the gradient granimInstance.clear();

Basic configuration

Basic configuration with two states and callbacks set.

var granimInstance = new Granim({
    element: '',
    name: 'granim',
    elToSetClassOn: 'body',
    direction: 'diagonal',
    isPausedWhenNotInView: false,
    opacity: [1, 1],
    stateTransitionSpeed: 1000,
    states : {
        "default-state": {
            gradients: [
                ['#834d9b', '#d04ed6'],
                ['#1CD8D2', '#93EDC7']
            ],
            transitionSpeed: 5000,
            loop: true
        },
        "dark-state": {
            gradients: [
                ['#757F9A', '#D7DDE8'],
                ['#5C258D', '#4389A2']
            ],
            transitionSpeed: 5000,
            loop: true
        }
    },
    onStart: function() {
        console.log('Granim: onStart');
    },
    onGradientChange: function(colorDetails) {
        console.log('Granim: onGradientChange, details: ');
        console.log(colorDetails);
    },
    onEnd: function() {
        console.log('Granim: onEnd');
    }
);

You can use more than 2 colors for the gradients, but cannot have different length of colors in the different states. you will also have to adapt the opacity.

var granimInstance = new Granim({
    element: '',
    name: 'granim',
    elToSetClassOn: 'body',
    direction: 'diagonal',
    isPausedWhenNotInView: false,
    opacity: [1, 1, .5, 1],
    stateTransitionSpeed: 1000,
    states : {
        "default-state": {
            gradients: [
                ['#834d9b', '#d04ed6', '#1CD8D2', '#93EDC7'],
                ['#1CD8D2', '#93EDC7', '#757F9A', '#4389A2']
            ],
            transitionSpeed: 5000,
            loop: true
        },
        "dark-state": {
            gradients: [
                ['#757F9A', '#D7DDE8', '#1CD8D2', '#93EDC7'],
                ['#5C258D', '#4389A2', '#1CD8D2', '#93EDC7']
            ],
            transitionSpeed: 5000,
            loop: true
        }
    }
);