Анимация градиента с плагином granim.js

index.html

<canvas id="canvas-basic"></canvas>
<canvas id="canvas-radial"></canvas>

main.css

#canvas-basic,
#canvas-radial {
	position: relative;
	display: block;
	width: 100%;
	height: 300px;
	margin-bottom: 20px;
}

main.js

var granimInstance = new Granim({
	element: '#canvas-basic',
	name: 'basic-gradient',
	direction: 'left-right',
	opacity: [1, 1],
	isPausedWhenNotInView: true,
	states : {
		"default-state": {
			gradients: [
				['#1967c3', '#4a90e2'],
				['#02AAB0', '#00CDAC'],
				['#DA22FF', '#9733EE']
			]
		}
	}
});

var granimInstance = new Granim({
	element: '#canvas-radial',
	name: 'radial-gradient',
	direction: 'radial',
	opacity: [1, 1],
	isPausedWhenNotInView: true,
	states : {
		"default-state": {
			gradients: [
				['#ffb347', '#ffcc33'],
				['#83a4d4', '#b6fbff'],
				['#9D50BB', '#6E48AA']
			]
		}
	}
});