Como hacer un Gradiente Animado en Oxygen

Ejemplo de Gradiente Oxygenados

En este tutorial de Oxygenados vamos a mostrar como crear en Oxygen un gradiente que tan en tendencia está, pero no un gradiente común sino un gradiente animado.
Para este tutorial vamos a utilizar una libreria llamada Granim.js y poco más .Ya aclarado todo pues vamos al lío.

Paso 1:

Para el paso 1 vamos a instalar la libreria en nuestro Wordpress, para eso ultimamente en Oxygenados estamos usando Script Organizer aunque también nos gusta mucho Advance Script, (desde ya les adelantamos que muy pronto haremos una revisión de los 2 y una comparativa de ellos.)  Volviendo al tema para incluir la librería hay dos formas, vamos, las de casi siempre: subir el archivo a nuestro servidor o insertarla vía CDN. Esta última es la que usamos nosotros por ser un poco más sencilla, abajo te dejo ambos enlaces.

https://cdnjs.cloudflare.com/ajax/libs/granim
/2.0.0/granim.min.js
granim.min.js

Paso 2:

Ya para este paso nos dirigimos al editor de Oxygen. Primeramente agregamos una sección, te recomiendo que agregues bastante padding superior e inferior para que se vea bien el degradado.

Luego nos dirigimos a Advanced > Layout > set Position to relative. 

A continuación agregue un bloque de código dentro de la sección.  Con el siguiente código:

PHP & HTML:

<canvas id = "hero-gradient"> </canvas>

CSS:

#canvas-basic { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }

JS:

var granimInstance = new Granim({ element: '#canvas-basic',direction: 'left-right', isPausedWhenNotInView: true,states : { "default-state": { gradients: [['#ff9966', '#ff5e62'],['#00F260', '#0575E6'], ['#e1eec3', '#f05053']] }}})

Y listo ya tenemos el efecto mostrado anteriormente. Para más efectos puedes visitar este link y jugar un poco. 

Ejemplos de Granim
databasefile-emptyrocketthumbs-uplayers