<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/
body {
margin-top: 50px;
text-align: center;
}
.box {
display: inline-block;
margin-right: 5px;
}
.pink {
background-color: pink;
}
var colors = ["#3498db", "#27ae60", "#f1c40f"];
gsap.to(".box", {
delay: 0.5,
duration: 1,
backgroundColor: function(i, elem, boxes) {
return colors[i % 3];
}
});