JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<div id="box"></div>

CSS

#box{
    position:relative;
    width:200px;
    height:200px;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ffffff), color-stop(1.0, #000000));
    margin:10px;
}

body{
background-color:#660000;
}

JavaScript

//TweenLite Gradient Demo ( **** WEBKIT ONLY *** )

//dependencies: TweenMax.min.js and ColorPropsPlugin.min.js
//learn more about The GreenSock Animation Platform for JS:
//http://www.greensock.com/get-started-js/
//http://www.greensock.com/v12/

//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);

//object to store color values
var myObject = {color0:'#ffffff', color1:'#000000'};

var target = document.getElementById('box');

//tween the color values in myObject
TweenMax.to(myObject, 2, {colorProps:{color0:'#000000', color1:'#ffffff'}, repeat:10, yoyo:true, ease:Linear.easeNone, onUpdate:applyProps});

//apply new color values to gradient css of target
function applyProps(){
   target.style.backgroundImage = '-webkit-gradient(linear, left top, left bottom, color-stop(0.00,' + myObject.color0 + '), color-stop(1.0,' + myObject.color1 + '))';
    
    //feel free to target other browser vendors 
    }