Profile Icon using GSAP

by Muhammad Hassaan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js"></script>
<button id="restart">
  <svg id="svgIcon" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 50 50">
    <path id="svgSelfcareIconPath1" class="path" d="M25.21,13.13a5.77,5.77,0,0,1,4.25,1.8,5.86,5.86,0,0,1,1.75,4.25,6.2,6.2,0,0,1-.5,2.47,6.94,6.94,0,0,1-1.25,1.78,6.11,6.11,0,0,1-8.5,0,6,6,0,0,1-1.55-6A5.61,5.61,0,0,1,21,14.93,5.75,5.75,0,0,1,25.21,13.13Z" />
    <path id="svgSelfcareIconPath2" class="path" d="M14.06,36.65a8.28,8.28,0,0,1,1.77-5.4A4.33,4.33,0,0,1,19,29.38h11.9a4.78,4.78,0,0,1,3.4,1.87,7.83,7.83,0,0,1,2,5.4" />
    
    <path id="middle1" d="M12.81,35.53a9,9,0,0,1,1.95-5.93c1.17-1.38,2.29-1.86,3.38-1.42a16.28,16.28,0,0,0,13.42.1q1.68-.75,3.6,1.32a8.62,8.62,0,0,1,2.18,5.93"/>
    <path id="middle2" d="M14.06,36.65a8.28,8.28,0,0,1,1.77-5.4A4.33,4.33,0,0,1,19,29.38h11.9a4.78,4.78,0,0,1,3.4,1.87,7.83,7.83,0,0,1,2,5.4" />

    
    <path id="svgStageHead" d="M25.18,16.07a12,12,0,0,1,6.62,1.8c1.82,1.19,2.73,2.6,2.73,4.25a4.33,4.33,0,0,1-.78,2.48,8.06,8.06,0,0,1-1.95,1.77,12.3,12.3,0,0,1-6.62,1.73,12.33,12.33,0,0,1-6.65-1.73q-2.81-1.77-2.81-4.25a4.11,4.11,0,0,1,.38-1.72,6.05,6.05,0,0,1,2.43-2.53A12,12,0,0,1,25.18,16.07Z" />
    

         <path id="end-one" d="M38,12L25,25.3L12,12"/>
    <path id="end-two" d="M12,38l13-12.7L38,38"/>
    
    <path id="stage2" d="M34.38,31.83a6,6,0,0,0-3.49-3.43,19,19,0,0,0-5.05-.46c-5.59,0-8.95,1.23-10,3.69" />
    <path id="stage1"...

CSS

button {
  padding:10px;
  background: green;
  border: 0;
  outline: 0;
  border-radius: 50%;
}

.path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

#close1,
#close2,
#middle1,
#middle2,
#stage1,
#stage2,
#end1,
#end2,
#end-one,
#end-two,
#svgStageHead {
  visibility: hidden;
}

JavaScript

const domPath1 = document.getElementById('svgSelfcareIconPath1');
const domPath2 = document.getElementById('svgSelfcareIconPath2');

const tl = new TimelineLite({paused: true, reversed: true})

  //First part
tl.to(domPath1, .2, {scaleX: .9, scaleY: 1.2, y: 2, transformOrigin: '50% 50%', ease: Power2.easeOut}, 'start')
  .to(domPath2, .2, {morphSVG: "#middle1", ease: Power2.easeOut}, 'start')
  .to(domPath1, .2, {scaleX: 1, scaleY: 1, y: -2, ease: Power2.easeIn})
  .to(domPath2, .2, {morphSVG: "#middle2", ease: Power2.easeOut}, "-=.1")
  
  //Second part
  .to(domPath1, .2, {y: 3, ease: Power2.easeIn})
  .to(domPath1, .1, {y: 0, morphSVG: "#svgStageHead", ease: Power2.easeOut})
  .to(domPath1, .2, {morphSVG: "#stage1", ease: Power2.easeOut})
  .to(domPath2, .2, { morphSVG: "#stage2", ease: Power2.easeOut}, "-=0.2")

   //Third part
  .to(domPath1, .2, {morphSVG: "#end-one", ease: Power2.easeOut}, "-=0")
  .to(domPath2, .2, {morphSVG: "#end-two", ease: Power2.easeOut}, "-=0.2");
  
//GSDevTools.create();

document.getElementById('restart').addEventListener('click', () => {
   tl.reversed() ? tl.play() : tl.reverse();
  });