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 class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box{
    position:relative;
    width:50px;
    height:50px;
    background-color:#f00;
    margin-top:10px;
}

JavaScript

var tl = new TimelineLite();

$(".box").each(function (index, elem) {
    
    var insertionTime = index * .2;
    
    //original insertMultiple
    
    /*
    tl.insertMultiple([
        TweenLite.to(elem, .5, {css:{rotation:180}}),
        TweenLite.to(elem, 1, {css:{left:200}})
    ], insertionTime);
    */

    
    //updated to use offsetOrLabel and baseTimeOrLabel
    //works great
    
    //comment-out next 2 lines when testing code on bottom
   
    tl.to(elem, 1, {css:{left:200}}, insertionTime, 0);
    tl.to(elem, .5, {css:{rotation:180}}, insertionTime, 0);
     
    
    /*
    
    The next code segment didn't give me expected results.
    
    I thought that the first tween would be inserted .-8 seconds before the end of the timeline AND a new dynamically named label ("label1", "label2", "label3" etc) would be added there as well.
    
    It appears the second tween is added AFTER the first tween is done (end of timeline) and not at the previously created label.
    
   Also it appears if you remove the second tween, I would think that the "left" tweens would overlap, but they do not. Perhaps I'm not understanding how a negative baseTimeOrLabel should work.
    
    */
    
    
  /*
    var label = "label" + index;
    tl.to(elem, 1, {css:{left:200}}, label, -0.8);
    tl.to(elem, .5, {css:{rotation:180}}, label);    
  */ 
    
});