Stylist Radio button with code and animation

---

HTML:

---

<div class="container">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
</defs>
<line id="base" fill="none" stroke="#20213C" stroke-width="100" stroke-linecap="round" stroke-miterlimit="10" x1="350" y1="300" x2="450" y2="300"/>
<line id="lineSelector" fill="none" stroke="#FFFFFF" stroke-width="60" stroke-linecap="round" stroke-miterlimit="10" x1="350" y1="300" x2="350" y2="300"/>
  <circle id="hitL" cx="350" cy="300" r="40" fill="#EEE" opacity="0"/>
  <circle id="hitR" cx="450" cy="300" r="40" fill="#EEE" opacity="0"/>
  <line id="hitArea" fill="none" stroke="transparent" stroke-width="100" stroke-linecap="round" stroke-miterlimit="10" x1="350" y1="300" x2="450" y2="300"/>
</svg>


</div>

---

CSS:

---

body{
  background-color #F4F8F9;}
 
.container{
  width 80%;
  margin auto;}
 
svg{
  visibility hidden}

#hitArea

  cursor pointer

---

Java-Script:

---

  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    lineSelector = select('#lineSelector'),
    hitArea = select('#hitArea'),
    hitL = select('#hitL'),
    hitR = select('#hitR'),
    base = select('#base'),
    selectorColorArray = ['#7FE6AD', '#ED4F43']


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


var introTl = new TimelineMax({paused:false, onComplete:createInteraction});
introTl.from(base, 0.4, {
  strokeWidth:0,
  delay:1
})
.from(lineSelector, 0.2, {
 strokeWidth:0
},'-=0.2')
.from(base, 0.4, {
  attr:{
    x1:400,
    x2:400
  },
  ease:Anticipate.easeIn
 
})
.from(lineSelector, 0.4, {
  attr:{
    x1:400,
    x2:400
  },
  ease:Anticipate.easeIn
},'-=0.4')

var tl = new TimelineMax({paused:true});
function createInteraction(){
  tl.to(lineSelector, 0.5, {
    attr:{
      x2:450
    },
    strokeWidth:30,
    ease:Power1.easeIn
  })
  .from(hitL, 1, {
    attr:{
      r:30
    },
    alpha:1,
    immediateRender:false,
    ease:Power1.easeOut
  },'-=0.5')
  .to(lineSelector, 1, {
    attr:{
      x1:450
    },
    strokeWidth:60,
    stroke:selectorColorArray[0],
    ease:Elastic.easeOut.config(1, 0.59)
  },'-=0.5')
  .to(base, 0.15,{
    attr:{
      x2:460
    },
    repeat:1,
    yoyo:true
  },'-=0.85')
  .to(base, 0.15,{
    attr:{
      x1:348
    },
    repeat:1,
    yoyo:true
  },'-=0.6')

  .addPause()
  .to(lineSelector, 1, {
    attr:{
      x1:350
    },
    strokeWidth:30,
    ease:Power1.easeIn
  })
  .from(hitR, 1, {
    attr:{
      r:30
    },
    alpha:1,
    immediateRender:false,
    ease:Power1.easeOut
  },'-=0.5')
  .to(lineSelector, 1, {
    attr:{
      x2:350
    },
    strokeWidth:60,
    stroke:selectorColorArray[1],
    ease:Elastic.easeOut.config(1, 0.59)
  },'-=0.5')
  .to(base, 0.15,{
    attr:{
      x1:340
    },
    repeat:1,
    yoyo:true
  },'-=0.85')
  .to(base, 0.15,{
    attr:{
      x2:452
    },
    repeat:1,
    yoyo:true
  },'-=0.6')

  hitArea.onclick = function(){

    if(tl.time() == tl.duration()){
      tl.play(0)
    } else {
      tl.play()
    }
  }

  hitArea.ontouchstart = hitArea.onclick;

  tl.timeScale(1.8);
  tl.progress(1);
 

}

---