JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
<div class="bg"></div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
.bg {
    position:absolute;
    width: 100%;
    height: 100%;
    /* background: #c0ffee; */
}

JavaScript

//WITH Timelines (cleaner, more versatile)
var tl = gsap.timeline({repeat: -1, repeatDelay: 1});

var green = '#7FF6BCFF';
var blue = '#7DD3F3FF';
var purple = '#D16EF2FF';

//tl.to('.bg', {backgroundImage: `linear-gradient(to bottom, ${green}, ${blue}, ${purple})` });
tl.set('.bg', {backgroundImage: `linear-gradient(to bottom, ${green}, ${blue})` });

tl.to('.bg', {backgroundImage: `linear-gradient(to bottom, ${green}, ${blue})` });
tl.to('.bg', {backgroundImage: `linear-gradient(to bottom, ${blue}, ${purple})` });
tl.to('.bg', {backgroundImage: `linear-gradient(to bottom, ${purple}, ${green})` });
tl.to('.bg', {backgroundImage: `linear-gradient(to bottom, ${green}, ${blue})` });
 

/* 
tl.to(".bg", {x: 100, duration: 1});
tl.to(".bg", {y: 50, duration: 1});
tl.to(".bg", {opacity: 0, duration: 1});
*/