JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="box" id="box1"></div>
   
<div class="box" id="box2"></div>

CSS

body{
    background-color:black;
}

.box{
    position:relative;
    margin-top:50px;
    margin-left:50px;
    width:100px;
    height:100px;
    background:url(http://www.snorkl.tv/dev/numbers_bg.png);    
}

JavaScript

var box1 = $("#box1"),
    box2 = $("#box2"),
    tl;
    
    
//single tween rotating and changing backgroundPosition
TweenMax.to(box1, 5, {css:{rotation:360, backgroundPosition:"-800px"}, repeat:5, yoyo:true})
    
//timeline similar to yours with very short tween durations    
tl = new TimelineMax({repeat:6, yoyo:true, repeatDelay:.8});

tl.to(box2, .0001, {css:{backgroundPosition:"-100px"}}, .5)
    .to(box2, .0001, {css:{backgroundPosition:"-200px"}}, .5)
    .to(box2, .0001, {css:{backgroundPosition:"-300px"}}, .5)
    .to(box2, 1, {css:{rotation:180}}, .5)         
    .to(box2, .0001, {css:{backgroundPosition:"-400px"}}, -.5)  



//using set instead of to()
/*
 tl.set(box2, {css:{backgroundPosition:"-100px"}}, .5)
    .set(box2,  {css:{backgroundPosition:"-200px"}}, .5)
    .set(box2,  {css:{backgroundPosition:"-300px"}}, .5)
    .to(box2, 1, {css:{rotation:180}}, .5)         
    .set(box2,  {css:{backgroundPosition:"-400px"}}, -.5)  
*/