How to create SVG animation

I really keen to know how create animation like this link http://ift.tt/2ahftH5

I know that they are using Greensock, TimelineJS

But I want to learn this. Anybody has an Idea of Tutorial regarding this or how can I learn same thing.

 #wrapper {
  width:20%;
}

#walker {
  /* top padding = (h / w) * 100 */
  /* (height & width of one frame) */
  padding-top:143.7%;
  display:block;
  background: url('http://ift.tt/2aEx1Af');
  background-size:cover;
}

/* demo stylin' */
body {
  background:#abffce;
}
#wrapper {
  max-width:200px;
  min-width:130px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

HTML

<div id="wrapper">
<div id="walker"></div>
</div>

JS

/* Dependencies TweenMax */

var totalFrames = 22;
var speed = 1;

var walkEase = new SteppedEase(totalFrames)
var finalPosition = '100% 0px';

var walkTL = new TimelineMax()
walkTL.to('#walker', speed, {
    backgroundPosition: finalPosition,
    ease: walkEase,
    repeat: -1
})