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

Предварительно необходимо скачать и подключить сам скрипт https://sarcadass.github.io/granim.js/

HTML часть

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

CSS часть

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

JS часть

<script>
  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']
            ]
        }
    }
});
</script>

Пример