JSFiddle - React, Tailwind, and code Playground

by Ico Dimchev

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TimelineMax.min.js"></script>
<h2>Animation</h2>
<div id="selector"></div>
<h2>Sprite sheet</h2>
<img src="http://libgdx.googlecode.com/svn/wiki/img/sprite_animation_frames_1.png"/>

CSS

#selector{
    background:url('http://libgdx.googlecode.com/svn/wiki/img/sprite_animation_frames_1.png') no-repeat 0 0;
    width:42px;height:52px;
}

JavaScript

var frameWidth = 43, frameHeight = 51, numCols = 6, numRows = 5;
var steppedEase = new SteppedEase(numCols-1);
var tl = new TimelineMax({repeat:-1});

for(var i=0;i<numRows;i++){
    tl.add( TweenMax.fromTo('#selector', 0.2, { backgroundPosition:'0 -'+(frameHeight*i)+'px'}, { backgroundPosition: '-'+(frameWidth*(numCols-1))+'px -'+(frameHeight*i)+'px', ease:steppedEase} ));
}