<div ng-app="app">
  <div id="page" ng-controller="switch_ctrl">
        <div class="switch">
          <div class="s_wrapper">
            <form action="" accept-charset="utf-8">
              <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32.323975mm" height="32.323978mm" viewBox="0 0 114.53377 114.53378" class="switch_bubble" version="1.1">
    <defs id="defs4"/>
    <metadata id="metadata7"/>
    <g id="layer1" transform="translate(-260.81948,-491.03328)">
      <path d="m375.35325 548.30017a57.266888 57.266888 0 0 1-57.26689 57.26689 57.266888 57.266888 0 0 1-57.26688-57.26689 57.266888 57.266888 0 0 1 57.26688-57.26689 57.266888 57.266888 0 0 1 57.26689 57.26689z" id="path4136" fill="#000"/>
    </g>
  </svg>
              <label>
                <input type="radio"  name="area" ng-model="action.mode" value="view" ng-change="bubblisity()">
                <md-icon>
                  view_list
                </md-icon>
              </label>
              <label>
                <input type="radio"  name="area" ng-model="action.mode" value="edit" ng-change="bubblisity()">
                <md-icon>
                  settings
                </md-icon>
              </label>
            </form>
          </div>
        </div>
      </div>
</div>
<footer>
  <div>
    Based on <a href="https://dribbble.com/shots/2440217-Fluid-Switch" target="_blank">Leonardo Zakour</a> creation
  </div>
</footer>

/*=====================================
=            SWITCH STYLES            =
======================================*/
@import "compass"; 

body {
  background-color:#4085ee;
  
  > div {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
#page {
  position: relative;
  width: 100%;
  height: 100%;
  @include display-flex;
  @include justify-content( center );
  @include align-items( center );
}

.switch {
  input {
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  .s_wrapper {
    position: relative;
    background-color: #1e59af;
    width: 120px;
    height: 60px;
    @include border-radius( 40px );

    form {
      position: relative;
      width: 100%;
      height: 100%;
      @include clearfix;
      overflow:visible;

      label {
        width: 50%;
        height: 100%;
        float: left;
        text-align: center;
        display: flex;
        @include justify-content( center );

        md-icon {
          z-index: 2;
          cursor: pointer;
          color:#4085ee;
        }

      }
    }

    .switch_bubble {
      position: absolute;
      height: 140%;
      width: auto;
      z-index: 0;
      left: -10%;
      top: -20%;
      overflow: visible;

      path {
        fill: #FFFFFF;
      }
    }

    label {
      z-index: 1;
    }
  }
}

footer {
  position: absolute;
  width: 100%;
  left:0;
  bottom:0;
  text-align:center;
  padding: 16px 0;
  color: #FFFFFF;
  a {
    color: #1e59af;
  }
}

var app = angular.module('app', ['ngMaterial']);

app.controller('switch_ctrl', ['$scope', '$element', function($, iElm){
  $.bubble = iElm[0].querySelector('.switch_bubble');
  $.action = {
    mode: "view"
  };
  $.bubblisity = function() {
    var goo_r = "m374.46898 548.22101c0 31.09552-23.46384 46.8216-48.30342 42.30342-14.47387-2.63271-45.5056-19.85157-65.44189-27.20312-22.20319-8.18748-40.86153 1.28386-40.86153-15.1003 0-16.48716 18.89368-7.0702 41.28072-15.25421 19.8359-7.25139 50.60538-24.69441 65.0227-27.04921 25.53469-4.17062 48.30342 11.2079 48.30342 42.30342z",
      goo_l = "m261.51459 548.22101c0 31.09552 25.46384 40.8216 50.30342 36.30342 14.47387-2.63271 43.5056-13.85157 63.44189-21.20312 22.20319-8.18748 40.86153 1.28386 40.86153-15.1003 0-16.48716-18.89368-7.0702-41.28072-15.25421-19.8359-7.25139-48.60538-18.69441-63.0227-21.04921-25.53469-4.17062-50.30342 5.2079-50.30342 36.30342z",
      ungoo = "m375.35325 548.30017a57.266888 57.266888 0 0 1-57.26689 57.26689 57.266888 57.266888 0 0 1-57.26688-57.26689 57.266888 57.266888 0 0 1 57.26688-57.26689 57.266888 57.266888 0 0 1 57.26689 57.26689z";

    if ($.action.mode == "view") {
      TweenMax.to($.bubble, 0.7, {
        xPercent: 0,
        ease: Power3.easeInOut
      });
      TweenMax.to($.bubble.querySelector('path'), 0.45, {
        morphSVG: goo_l,
        ease: Power2.easeIn
      });
      TweenMax.to($.bubble.querySelector('path'), 0.55, {
        morphSVG: ungoo,
        delay:0.45,
        ease: Elastic.easeOut.config( 0.4, 0.25)
      });
    } else {
      TweenMax.to($.bubble, 0.7, {
        xPercent: 70,
        ease: Power3.easeInOut
      });
      TweenMax.to($.bubble.querySelector('path'), 0.45, {
        morphSVG: goo_r,
        ease: Power2.easeIn
      });
      TweenMax.to($.bubble.querySelector('path'), 0.55, {
        morphSVG: ungoo,
        delay:0.45,
        ease: Elastic.easeOut.config( 0.4, 0.25)
      });
    };

  }
}]);