JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>

<p class="first">this will animate first</p>

<div class="box"></div>
<img src="http://lorempixel.com/output/city-q-g-100-100-10.jpg" />

CSS

.box{
    margin-top:10px;
    position:relative;
    width:40px;
    height:40px;
    background-color:red;
}

JavaScript

/* Add multiple tweens at the same time 

In the code below, the second tween is added at a label named "red". Since "red" doesn't yet exist, it is placed at the end of the timeline marking the insertion point for the 2nd tween.
The third tween is also added at the "red" label.

If you want the 2nd and 3rd tween to both start exactly 1 second after the first tween ends, change the second tween to 

.to($(".box"), 1, {css:{left:200}}, 1, "red")

read more about the to() method here: http://api.greensock.com/js/com/greensock/TimelineLite.html#to()

*/



var tl = new TimelineLite();

tl.to($("p"), 1, {css:{backgroundColor:"black", color:"white"}})   
  .to($(".box"), 1, {css:{left:200}}, "red") 
  .to($("img"), 1, {css:{rotation:360}}, "red")
    

//the next code block does the same thing but with more code
    
    
/*

    
tl.append(TweenLite.to($("p"), 1, {css:{backgroundColor:"black", color:"white"}}))
  .append(TweenLite.to($(".box"), 1, {css:{left:200}}), "red")   
  .append(TweenLite.to($("img"), 1, {css:{rotation:360}}), "red")    
    
    
*/