What it does
Granim.js is an MIT-licensed JavaScript library for animated canvas gradients. Developers define colour sequences and named states, then control direction, timing, looping and image blending through code.
Add a canvas element, load Granim and create an instance targeting that canvas. The states object holds each colour sequence; a state can use evenly spaced colours or specify their positions from 0 to 1. Hex, RGB and HSL forms are accepted, including versions with transparency.
Use changeState() to switch sequences and play() or pause() to control animation. The library pauses when the browser tab changes; isPausedWhenNotInView also stops it when the canvas leaves the visible page area. Each gradient across all states must use the same number of colours.
An optional image can sit beneath the gradient with positioning, stretching and blend settings. MIT permits commercial projects and modifications, with the copyright and permission notices retained.
Strengths
- Callbacks and events report animation starts, ends, loops and gradient changes.
- Direction can be diagonal, horizontal, vertical, radial or custom.
Watch out for
- All gradients and states must contain an equal number of colours.
- Blend modes require both an image and gradients to be configured.
Best for
- Web developers connecting animated backgrounds to application states.