JSFiddle - React, Tailwind, and code Playground

by bizamajig

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>
<div id="title"></div>
<button id="btn_start" type="button" style="width:200px;font-weight:bold" class="btn btn-primary btn-lg">Start</button>

CSS

#title{
    background:url('http://bizamajig.com/content/34931/comp-2-header-2.png') no-repeat 0 0;
	background-color: red;
    height:200px;
	width:618px;
	position:relative;
}

JavaScript

var tl = new TimelineMax({paused:true});

var buildAnimation = function(label, width, height, rows, cols, speed) {
    var i,
        steppedEase = new SteppedEase(cols - 1),
        animation = new TimelineLite();
    for (i = 0; i < rows; i += 1) {
        animation.fromTo('#'+label, speed, {
            backgroundPosition: '0 -' + (height * i) + 'px'
        }, {
            backgroundPosition: '-' + (width * (cols - 1)) + 'px -' + (height * i) + 'px',
            ease: steppedEase
        }, label + i)
    }
    return animation;
};

tl.add(buildAnimation("title", 628, 510, 10, 4, 0.11))
  .to("#title", 0.5, {left:-1000}, "+=1.5");

$("#btn_start").click(function() {
    tl.play();
});