<svg class="bgGradSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
<linearGradient id="bgGrad" gradientUnits="userSpaceOnUse" x1="400" y1="-1.795888e-008" x2="400" y2="600">
	<stop  offset="0" style="stop-color:#22A4CA"/>
	<stop  offset="0.61" style="stop-color:#115F9A"/>
</linearGradient>
<rect fill="url(#bgGrad)" width="100%" height="100%"/>  
</svg>


<svg class="mainSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
<defs>
      <filter id="glow" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB">
        <feGaussianBlur stdDeviation="5" result="coloredBlur" />
        <feOffset dx="0" dy="20" result="offsetblur"></feOffset>
        <feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.123"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
          <feMergeNode/>          
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>  
</defs>

<g id="graphTextGroup" opacity="0.5">
<text transform="translate(48.33 473.71)" font-size="18" fill="#fff" font-family="Roboto" font-weight="700">0</text>
    <text transform="translate(48.33 301.71)" font-size="18" fill="#fff" font-family="Roboto">200</text>
    <text transform="translate(48.33 101.71)" font-size="18" fill="#fff" font-family="Roboto">400</text>   
  </g>
<g id="horizontalLinesGroup"   fill="none" stroke="#FFF" stroke-miterlimit="10">
	<line  x1="780" y1="481.7" opacity="0.1" x2="30" y2="481.7"/>
	<line  x1="780" y1="381.7" opacity="0.1" x2="30" y2="381.7"/>
	<line  x1="780" y1="281.7" opacity="0.1" x2="30" y2="281.7"/>
	<line  x1="780" y1="181.7" opacity="0.1" x2="30" y2="181.7"/>
	<line  x1="780" y1="81.7"  opacity="0.1" x2="30" y2="81.7"/>
     
</g>  
  <g id="uiGroup" filter="url(#glow)">
<path id="graphLine" fill="none" stroke-linecap="round" stroke="#F79819" stroke-width="4" stroke-miterlimit="10" d="M94.6,405.1
	c62.9-95,109.2-111.7,142.4-103.8c44.6,10.6,74.8,67.9,143.4,63.8c35-2.1,32.7-17.4,73.9-21.7c77.7-8.2,105.9,44,136.3,13.6
	c30.6-30.5,10.8-91.7,44.9-127.5c29.1-30.6,56.7,0,94.1-33.9c20.6-18.6,32.6-46.2,39.6-66.5"/>
    <g id="connectorGroup">
    <line id="connector" x1="92" x2="92" y1="0" y2="0" stroke="#FFF" />
    </g>
 <g class="box">
  <rect x="0" width="80" height="40" rx="20" ry="20" fill="#FFF"/>
  <text id="boxLabel" x="40" y="28"></text>
  </g> 
  </g>
    
  <circle id="nullDot" fill="red" cx="0" cy="0" r="0"/>
  <circle id="graphDot" fill="#FFF" cx="0" cy="0" r="10"/>
  <circle id="dragger" fill="rgba(240,240,240,0.1)" cx="0" cy="0" r="15" stroke="rgba(240,240,240,0.05)" stroke-width="10"/>
  <linearGradient id="boxGrad" gradientUnits="userSpaceOnUse" x1="65.7809" y1="25.7808" x2="14.2194" y2="25.7808" gradientTransform="matrix(-5.857245e-007 -1 1 -5.872379e-007 14.2192 65.7809)">
	<stop  offset="0.3858" style="stop-color:#E4386D"/>
	<stop  offset="0.7513" style="stop-color:#CF2156"/>
</linearGradient>

</svg>
body {
  background-color:#115F9A;
  overflow: hidden;
  /* font-family: 'Alegreya Sans', sans-serif; */
  
}

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


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


.mainSVG{
  position:absolute;
  width:100%;
  height:100%;
  visibility:hidden;
  /*  top:200px; */
  left:50%;
  transform:translate(-50%, 0%);
  overflow:visible;
}

#boxLabel{
  text-anchor:middle;
  fill:#115F9A;
  font-size:21px;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  font-family: 'Roboto', sans-serif;
  font-weight:700;
}

.box{
  opacity:0;
}
circle{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
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(ds);
  },
  mainSVG = select('.mainSVG'),
  box = select('.box'),
  connector = select('#connector'),
  connectorGroup = select('#connectorGroup'),
  dragger = select('#dragger'),
  graphDot = select('#graphDot'),
  boxLabel = select('#boxLabel'),
  nullDot = select('#nullDot'),
  graphLine = select('#graphLine'),
  graphBezier = MorphSVGPlugin.pathDataToBezier(graphLine.getAttribute('d')),
  perc,
  boxPos = {
    x: 0,
    y: 0
  },
  //pt = mainSVG.createSVGPoint(),
  isPressed = false

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

TweenMax.set([dragger, graphDot, nullDot], {
  transformOrigin: '50% 50%'

})
TweenMax.set([box], {
  transformOrigin: '50% 100%'

})

var tl = new TimelineMax({
  onUpdate: updateGraph,
  paused: true
});
tl.to([graphDot, dragger], 5, {
  bezier: {
    type: "cubic",
    values: graphBezier,
    autoRotate: false
  },
  ease: Linear.easeNone
})

function updateTimeline() {

  perc = nullDot._gsTransform.x / 770;
  //console.log(perc)

  //tl.progress(perc)  ;
  TweenMax.to(tl, 0.5, {
    progress: perc
  })

}

function updateGraph() {

  boxPos.x = dragger._gsTransform.x - (box.getBBox().width / 2);
  boxPos.y = dragger._gsTransform.y - (box.getBBox().height * 3);
  TweenMax.to(box, 1, {
    x: boxPos.x,
    y: boxPos.y,
    ease: Elastic.easeOut.config(0.7, 0.7)
  })

  boxLabel.textContent = parseInt(600 - dragger._gsTransform.y) - 118 //.toFixed(2);
}

function graphPress() {
  isPressed = true;

  TweenMax.to(dragger, 1, {
    attr: {
      r: 30
    },
    ease: Elastic.easeOut.config(1, 0.7)
  })

  TweenMax.to(connector, 0.6, {
    attr: {
      x1: dragger._gsTransform.x,
      x2: dragger._gsTransform.x,
      y1: boxPos.y,
      y2: dragger._gsTransform.y
    }
  })
  TweenMax.to(connector, 0.1, {
    attr: {
      x1: box._gsTransform.x + 40,
      x2: boxPos.x + 40,
      y1: box._gsTransform.y + 20,
      y2: graphDot._gsTransform.y
    },
    onComplete: function() {
      //TweenMax.ticker.addEventListener('tick', connectLine);
      TweenMax.to(box, 0.8, {
        scale: 1,
        alpha: 1,
        y: boxPos.y,
        ease: Elastic.easeOut.config(1.2, 0.7)
      })
    }
  })

}

function graphRelease() {

  isPressed = false;

  TweenMax.to(dragger, 0.3, {
    attr: {
      r: 15
    },
    ease: Elastic.easeOut.config(0.7, 0.7)
  })
  TweenMax.to(box, 0.2, {
    scale: 0,
    alpha: 0,
    y: boxPos.y + 30,
    ease: Anticipate.easeOut
  })

  //TweenMax.ticker.removeEventListener("tick", connectLine);

}

updateTimeline();
tl.progress(0.000001);
//updateGraph();
//graphRelease();

var introTl = new TimelineMax({
  onComplete: init,
  delay: 1
});
introTl.staggerFrom('#horizontalLinesGroup line', 1, {
    drawSVG: '100% 100%',
    alpha: 1,
    //scaleX:-1,
    transformOrigin: '0% 100%'
  }, 0.1)
  .staggerFrom('#graphTextGroup text', 1, {

    alpha: 0
  }, 0.1, '-=0.5')

.from([graphDot, dragger], 0.71, {
    attr: {
      r: 0
    },
    ease: Power1.easeOut
  }, '-=1.3')
  .from(graphLine, 2.3, {
    drawSVG: '0% 0%',
    ease: Power3.easeInOut
  }, '-=1.73')

/* // Get point in global SVG space
function cursorPoint(e) {
  pt.x = e.clientX;
  pt.y = e.clientY;
  return pt.matrixTransform(mainSVG.getScreenCTM().inverse());
}
 */
function connectLine() {

  if (isPressed) {
    TweenMax.set(connector, {
      attr: {
        x1: box._gsTransform.x + 40,
        x2: boxPos.x + 40,
        y1: box._gsTransform.y + 43,
        y2: graphDot._gsTransform.y
      }
    })
  } else {

    TweenMax.to(connector, 0.1, {
      attr: {
        x1: graphDot._gsTransform.x,
        x2: graphDot._gsTransform.x,
        y1: graphDot._gsTransform.y,
        y2: graphDot._gsTransform.y
      }
    })
  }
}

function init() {

  Draggable.create(nullDot, {
    type: 'x',
    trigger: dragger,
    onPress: graphPress,
    bounds: {
      minX: 0,
      maxX: 770
    },
    zIndexBoost:false,
    onDrag: updateTimeline,
    onRelease: graphRelease,
    
    //throwProps:true,
    onThrowUpdate: updateTimeline
      //snap:[0,200, 400, 700, 770]
  })
  TweenMax.ticker.addEventListener('tick', connectLine);
  graphRelease();
}

/* var isDevice = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));
if (isDevice) {
  //select('#uiGroup').setAttribute('filter', '')
} */
/* TweenMax.globalTimeScale(0.5) */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js