super mario gsap

super mario GreenSock animation

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container">
    <div class="mario"></div>
    <div class="doboz"></div>
    <div class="ground"></div>
</div>

CSS

.container{
    background-color: #6888F8;
    width: 320px;
    height: 288px;
    position: relative;
    overflow: hidden;
}
.mario{
    background-image: url('http://i.imgur.com/jtq0Lxy.png');
    width: 28px;
    height: 34px;
    position: absolute;
    left: 20px;
    bottom: 32px;
}
.doboz{
    background-image: url('http://i.imgur.com/IaTAy1a.gif');
    width: 32px;
    height: 32px;
    position: absolute;
    left: 20px;
    bottom: 125px;
}
.ground{
    background-image: url('http://i.imgur.com/cDSogMD.jpg');
    width: 320px;
    height: 32px;
    position: absolute;
    bottom: 0px;
    background-position: 0 0,
}

JavaScript

TweenLite.from(".mario",0.8,{left: -34});
TweenMax.from(".doboz",2,{x: 300});
TweenMax.to(".doboz",2,{x: -70, delay: 1.5});
TweenLite.to(".mario",0.5,{bottom: 125,backgroundImage: "url('http://i.imgur.com/ldNGOLF.gif')", delay: 1.4 });
TweenLite.to(".mario",0.2,{
    bottom: 32,
    backgroundImage: "url('http://i.imgur.com/jtq0Lxy.png')",
    delay: 1.7
});
/**
TweenLite.to(".ground", 10,{
    backgroundPosition:"-33px 0px",
});
** - **/

var tl = new TimelineMax({repeat:-1});
function backgroundMoveInitiate()
{
  tl.to(".ground", 0.5, {
        backgroundPosition:"-33px 0px",
      ease:Linear.easeNone
        });
}

backgroundMoveInitiate();