SOURCE

var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    mainSVG = select('.mainSVG'),
    track = select('#track'),
    wholeGroup = select('#wholeGroup'),
    dragRing = select('#dragRing'),
    dotGroup = select('#dotGroup'),
    topRing = select('#topRing'),
    bgRing = select('#bgRing'),
    bgRingCenter = select('#bgRingCenter'),
    dragLabel = select('#dragLabel'),
    ringLabel = select('#ringLabel'),
    step = 60,
    podInitX = 0,
    numItems = 9,
    currentId


TweenMax.set('svg', {
  visibility: 'visible'
})

function makeDots(){
  
  for(var i = 0; i < numItems; i++){
    var dot = select('#pageDot').cloneNode(true);
    dotGroup.appendChild(dot);
    TweenMax.set(dot, {
      attr:{
        cx:step * i
      },
      className:'pageDot',
      id:"pageDot" + i
    })
  }
  
 
  
  TweenMax.set(track, {
    attr:{
      x1:0,
      x2:(numItems-1) * step
    }
  })  
  Draggable.create(dragRing, {
    type:'x',
    bounds:{minX:0, maxX:(numItems-1)*step},
    liveSnap:function(endValue){

      return Math.round(endValue / step) * step;
    },
    onDrag:throwUpdate,
    onPress:onPress,
    onRelease:onRelease,
    overshootTolerance:0.5,
    cursor:'pointer'
  })
  
   TweenMax.set(wholeGroup, {
     x:(800/2) - (wholeGroup.getBBox().width/2)
   })
   

}

function throwUpdate(){
  TweenMax.staggerTo([topRing, bgRing, bgRingCenter], 1, {
    attr:{
      cx:dragRing._gsTransform.x
    },
    ease:Elastic.easeOut.config(1.8, 0.8)
  },0.005)
  
  
  currentId = Math.round(dragRing._gsTransform.x/step);
  
  TweenMax.staggerTo('.pageDot',0.4, {
    cycle:{
      attr:function(i){        
        return (i != currentId) ? {r:10} : {r:20}       
      },
      fill:function(i){
        return (i != currentId) ? '#4CAF50' : '#E8F5E9'
      }
    },
    onUpdate:updateUI
  },0.005)

  updateUI();
}


function onPress(){
  TweenMax.to(bgRing, 1, {
    attr:{
      cy:230,
      r:40
    },
    ease:Elastic.easeOut.config(0.98, 0.85),
    onUpdate:updateUI
  })
 TweenMax.to(bgRingCenter, 1, {
    attr:{
      cy:230,
      r:25
    },
    ease:Elastic.easeOut.config(1, 0.75)
    
  })

  TweenMax.to(dragLabel, 0.3, {
    scale:0,
    transformOrigin:'50% 50%'
  })  

  TweenMax.to(topRing, 0.3, {
    attr:{
      r:0
    }
    
  })  
    
}
function onRelease(){
  TweenMax.to(bgRing, 0.3, {
    attr:{
      cy:300,
      r:50
    },
    //strokeWidth:40,
    //fill:'#2E7D32',
    ease:Power3.easeOut,
    onUpdate:updateUI
  })
    
 TweenMax.to(bgRingCenter, 0.3, {
    attr:{
      cy:300,
      r:0
    },
    ease:Power3.easeOut
  })
    
  TweenMax.to(dragLabel, 0.3, {
    scale:1,
    transformOrigin:'50% 50%'
  }) 
  
  TweenMax.to(topRing, 0.83, {
    attr:{
      r:35
    },
    ease:Elastic.easeOut.config(1, 0.87)
  })  
      
}

function updateUI(){
  
    TweenMax.to(ringLabel,0.01,  {
     attr:{
      x:Number(bgRing.getAttribute('cx')),
      y:Number(bgRing.getAttribute('cy')) + 10
     }

    })  

  dragLabel.textContent = currentId+1;
  ringLabel.textContent = currentId+1;    
}

document.body.onclick = function(e){

  var target = e.target;
  var className = target.getAttribute('class');
  
  if(className){
    
    var posX = target.getAttribute('cx') - podInitX;
    
    TweenMax.to(dragRing, 0.26, {
      x:posX,
      onUpdate:throwUpdate
    })
  }
}

makeDots();


//make it go to an initial dot
var initId = Math.floor(numItems/2);
var initDot = selectAll('.pageDot')[initId];
document.body.onclick({target:initDot});

<svg class="mainSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" text-rendering="optimizeSpeed">

<defs>
  <filter id="goo" x="-100%" y="-100%" width="350%" height="350%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -7" result="cm" />
    
        <feComposite in="SourceGraphic" in2="cm" />
  	</filter>  
  <circle id="pageDot" fill="#8AB530" cx="0" cy="300" r="20"/>
  
</defs>
  <g id="wholeGroup">
  <g filter="url(#goo)">
<circle id="bgRing" fill="#2E7D32" stroke="#2E7D32" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300" r="50"/>  


<line id="track" fill="none" stroke="#2E7D32" stroke-width="60" stroke-linecap="round" stroke-miterlimit="10" x1="0" y1="300" x2="0" y2="300"/>
  </g>
<circle id="bgRingCenter" fill="#388E3C" stroke="none" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300" r="0"/>        
    <text id="ringLabel" x="0" y="300">20</text>
    <circle id="topRing" fill="#388E3C" stroke="none" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300" r="35"/>
<g id="dotGroup" stroke="#2E7D32" stroke-width="0">

</g>

  <g id="dragRing" >
  <circle fill="rgba(23, 45, 190, 0)" stroke="none" stroke-width="10" stroke-miterlimit="10" cx="0" cy="300" r="30"/>
    <text id="dragLabel" x="0" y="310">50</text>
  </g>
  </g>
</svg>

body {
  background-color:#E8E8E8;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:100%;
  height:100%;
  visibility:hidden;
 
}

#dragLabel,#ringLabel{
  font-family:Arial, sans-serif;
  font-size:23px;
  fill:#2E7D32;
  text-anchor:middle;
  font-weight:700;
  
}

 #ringLabel{
  fill:#E8F5E9;
}

circle, text, g, .pageDot{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
text, .pageDot{
-webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;     
  user-select: none;
}

.pageDot{
  cursor:pointer;
}