<h1>Easy Stretchy Nav</h1>


<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="600" height="120" viewBox="0 0 600 120">

 <rect id="stretchy" x="20" y="30" width="60" height="60" rx="8px" ry="8px" stroke-miterlimit="10"/>
  <g id="icons">
    <g>
      <rect x="20" y="30" width="60" height="60"  rx="8px" ry="8px" stroke-miterlimit="10"/>
      <path d="M38.34,61.55,31,66.77l-1-1.46,8.34-6ZM50,45.7l13.19,9.4,1-1.47L50,43.47,35.8,53.65l1,1.45ZM60.45,62.3l5.69,4V76.53H52.71V68.72h-5.4v7.81H33.88V66.35l5.67-4V54.65L50,47.18l10.45,7.47ZM42.82,61.1h5.26V56.17H42.82Zm.58,7.51H37.64v3.11H43.4Zm13.22,0v3.11h5.76V68.61Zm.58-7.51V56.17H51.93V61.1Zm4.46-1.78v2.23L69,66.83l1-1.48Z"/>
    </g>
    <g>
      <rect x="120" y="30" width="60" height="60"  rx="8px" ry="8px" stroke-miterlimit="10"/>
      <path d="M155.59,80c-23.33,0-23.42-12.35-19.05-16.72,3.9-3.9,11-4.51,1.47-10.72a1.19,1.19,0,0,0,.2-.19c6.53,2.42,8,3.32,8,6.05,0,1.49-2,2.91-3.67,4.57-3.89,3.9-3.47,9.69,10.17,9C153.48,73.54,155.59,80,155.59,80ZM139.45,43.64c0,1.86-1.2,2.56-2,4.28-1,2.25-.93,3.45-1.68,3.45s-.66-1.2-1.67-3.45c-.77-1.72-2-2.42-2-4.28A3.65,3.65,0,0,1,135.81,40h0A3.65,3.65,0,0,1,139.45,43.64Zm-1.71,0a1.93,1.93,0,1,0-1.93,1.92A1.92,1.92,0,0,0,137.74,43.64Zm30.09,20c0,3.88-2.51,5.34-4.12,8.93-2.1,4.71-1.92,7.22-3.49,7.22s-1.39-2.51-3.49-7.22c-1.61-3.59-4.11-5.05-4.11-8.93a7.62,7.62,0,0,1,7.6-7.61h0A7.62,7.62,0,0,1,167.83,63.69Zm-3.59,0a4,4,0,1,0-4,4A4,4,0,0,0,164.24,63.68Z"/>
    </g>
    <g>
      <rect x="220" y="30" width="60" height="60" rx="8px" ry="8px" stroke-miterlimit="10"/>
      <path d="M245.17,50.79a1.39,1.39,0,0,1,.72-1.83l4.76-2.08L253,52.22l2.6-1.13-2.33-5.34L258,43.67a1.4,1.4,0,0,1,1.83.72l5.29,12.14a1.39,1.39,0,0,1-.72,1.83l-12.13,5.29a1.4,1.4,0,0,1-1.83-.72Zm24.54,18c-.24.3-.92.15-1.52-.32L262.6,64a2,2,0,0,1-.21-.19l-.82.35-3.24,4a5.12,5.12,0,0,0-1.07-.89l1.59-2-3.06,1.31a5.64,5.64,0,0,0-1.49-.2,5.53,5.53,0,0,0-4.85,2.87,1,1,0,0,1-1.06-.57l-8.62-19.55a1.62,1.62,0,0,0-1.35-.88H238a1.23,1.23,0,0,1-1.14.74h-4.09a1.22,1.22,0,0,1-1.13-.74H231a1,1,0,0,1-1-1v-.63a1,1,0,0,1,1-1h.69a1.22,1.22,0,0,1,1.13-.74h4.09a1.23,1.23,0,0,1,1.14.74h2.08a1.59,1.59,0,0,1,1.34.88l8.29,18.8A1,1,0,0,0,251,66l16.71-7.18a1,1,0,0,1,1.25.52l.24.6a1,1,0,0,1-.53,1.24l-1.26.54,2.4,5.56C270.1,67.94,270.06,68.64,269.71,68.79ZM268,66.52l-1.85-4.29-2.29,1ZM258.78,72a4.48,4.48,0,1,1-4.48-4.48A4.48,4.48,0,0,1,258.78,72Zm-2.65,0a1.83,1.83,0,1,0-1.83,1.82A1.83,1.83,0,0,0,256.13,72Z"/>
    </g>
    <g>
      <rect x="320" y="30" width="60" height="60" rx="8px" ry="8px" stroke-miterlimit="10"/>
      <path d="M365.74,44.05H334.26A4.26,4.26,0,0,0,330,48.3v6.75a4.26,4.26,0,0,0,4.26,4.25h5.63V74.66a1.3,1.3,0,0,0,1.3,1.29h17.62a1.3,1.3,0,0,0,1.3-1.29V59.3h5.63A4.26,4.26,0,0,0,370,55.05V48.3A4.26,4.26,0,0,0,365.74,44.05Zm-7.85,24.13a.39.39,0,0,1-.37.39,5.18,5.18,0,0,0-4.8,4.8.39.39,0,0,1-.39.37h-4.66a.39.39,0,0,1-.39-.37,5.18,5.18,0,0,0-4.8-4.8.39.39,0,0,1-.37-.39V51.67h15.78Zm9.87-13.13a2,2,0,0,1-2,2h-5.63V53.9H363a1.43,1.43,0,0,0,1.42-1.42V50.87A1.43,1.43,0,0,0,363,49.45h-25.9a1.43,1.43,0,0,0-1.42,1.42v1.61a1.43,1.43,0,0,0,1.42,1.42h2.84v3.16h-5.63a2,2,0,0,1-2-2V48.3a2,2,0,0,1,2-2h31.48a2,2,0,0,1,2,2Zm-21,3.73H349c-.35.47-.72.89-1.3.89A1,1,0,0,1,346.73,58.78Zm3.27,5c3.64,0,6.58-2.43,6.58-5.42S353.64,53,350,53s-6.58,2.42-6.58,5.41S346.36,63.79,350,63.79Zm-4.26-5.67a.14.14,0,0,1,.14-.14h.45a5,5,0,0,1,.4-2h1.72v.22A1.78,1.78,0,0,0,346.73,58h2.63a8.77,8.77,0,0,1,1.29-1.71c.93-.82,2.73-.56,3,1.71h.58a.14.14,0,0,1,.14.14v.52a.14.14,0,0,1-.14.14h-.58a4.65,4.65,0,0,1-.56,1.83h-1.55V60.4a2.17,2.17,0,0,0,1.73-1.62h-2.35c-.81,1.28-1.33,2.1-2.53,2.1a2.06,2.06,0,0,1-2-2.1h-.49a.14.14,0,0,1-.14-.14Zm7.57-.14h-2.08a3.46,3.46,0,0,1,.68-.82C352.57,56.7,353.24,57.2,353.31,58Zm-1.38,8-1.14,5.37a.4.4,0,0,1-.39.31h-.8a.4.4,0,0,1-.39-.31L348.06,66a.4.4,0,0,1,.45-.47,10.15,10.15,0,0,0,3,0A.39.39,0,0,1,351.93,66Z"/>
    </g>
    <g>
      <rect x="420" y="30" width="60" height="60" rx="8px" ry="8px" stroke-miterlimit="10"/>
      <path d="M437.57,80c.4-1.29.69-2.65.94-3.83a12.21,12.21,0,0,1,.74-2.76,1.8,1.8,0,0,1,1.25-.75,2,2,0,0,0,.9,1.69,1.94,1.94,0,0,0,1.91.21,1.81,1.81,0,0,1-.24,1.44,12,12,0,0,1-2.28,1.71C439.78,78.38,438.62,79.15,437.57,80Zm11.79-1.36a8.84,8.84,0,0,0-1.52-5c1.2-1.23,3.27-3.38,5.59-5.83C454.26,71.12,454.52,76.2,449.36,78.64ZM434.47,68.55c.38-5.92,5.72-7.43,8.73-7.81-1.46,3-2.75,5.8-3.5,7.38A8.81,8.81,0,0,0,434.47,68.55Zm9.25,3.59,4.7-6.93.2-1.5-1.32.74-4.7,6.93L441,70.27c1.3-2.76,10.33-21.95,12.09-24.55,3.15-4.65,10-5.57,11.63-5.72.44,1.55,2.11,8.34-1,12.93-3.34,4.94-16.35,18.31-18.32,20.33Zm17-26.24a2.82,2.82,0,1,0,.75,3.92A2.82,2.82,0,0,0,460.69,45.9Z"/>
    </g>
    <g>
      <rect x="520" y="30" width="60" height="60" rx="8px" ry="8px" stroke-miterlimit="10"/>
      <path d="M542.09,58.06a3.66,3.66,0,0,0,1.45-1l1.58,1.58-1.25,1.25ZM540.7,52a2.63,2.63,0,1,0,2.62,2.62A2.62,2.62,0,0,0,540.7,52Zm0-1.1a3.73,3.73,0,0,1,3.72,3.72,3.56,3.56,0,0,1-.29,1.44l4.8,4.79,5.6-5.59-13.95-14L535,46.9l4.27,4.27A3.73,3.73,0,0,1,540.7,50.89ZM538,42.68,535.29,40l-1.64,1.64,2.68,2.68ZM550.62,61.6h.17l.55,2.88.15.12,1.13-.2.09-.17-.56-2.89h0a4.54,4.54,0,0,0,1.21-.64h0l2.08,2.09.18,0,.83-.81,0-.19-2.1-2.1,0,0a4.8,4.8,0,0,0,.62-1.16v0l2.85.56L558,59l.23-1.13-.12-.15-2.87-.56v0a4.4,4.4,0,0,0-.09-1.15l-5.53,5.53A4.34,4.34,0,0,0,550.62,61.6Zm13.91,5.54a13,13,0,0,1-4.39,3.49c-.41.21-.37.41-.33.61s0,.87-.43,1.05a12.32,12.32,0,0,1-3,.95l-.89-2.63,8.32-8.35-1.73-1.72s-7.34,7.43-8.22,8.24-2.59.21-2.72.21l.8,5.38c2.54.21,8.09-.29,14.38-5.52C566.57,68.66,564.68,66.93,564.53,67.14ZM537.46,56.46c-2.4,5.39,1.12,12.42,6.14,15.51l2.48-4.36A9,9,0,0,1,541.22,63a8.51,8.51,0,0,1-.56-4.63A3.75,3.75,0,0,1,537.46,56.46Zm.83-4.69L536.5,50l-1.24,1.24,2,2A3.66,3.66,0,0,1,538.29,51.77Zm12.58,25.48H558V80H536V77.25h6.32l5.89-10.59,1.29.36s1.43,10,1.4,10.2ZM549.52,72a1.7,1.7,0,1,0-1.7,1.7A1.7,1.7,0,0,0,549.52,72Zm-1.7-1a1.06,1.06,0,1,0,1.06,1A1,1,0,0,0,547.82,71Z"/>
    </g>
  </g>
</svg>

<div class="branding">
  <p>see the tutorial on</p>
  <h2><span>motion</span>tricks.com</h2>
  <a href="https://www.motiontricks.com/svg-stretchy-navigation/" target="_blank">Tutorial</a>
</div>

body {
  font-family: "proxima-nova", sans-serif;
  color: white;
  display: flex;
  height: 100vh;
  background: #111;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: repeating-linear-gradient(
      0deg,
      hsla(103, 11%, 32%, 0.09) 0px,
      hsla(103, 11%, 32%, 0.09) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(103, 11%, 32%, 0.09) 0px,
      hsla(103, 11%, 32%, 0.09) 1px,
      transparent 1px,
      transparent 11px
    ),
    linear-gradient(90deg, hsl(317, 13%, 6%), hsl(317, 13%, 6%));
}
#demo {
  width: 90vw;
  height: auto;
  max-width: 720px;
  overflow: visible;
  margin: 1rem auto;
}
#icons path {
  fill: white;
}

#stretchy {
  fill: #5da662;
}

text {
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  fill: rgba(0, 0, 0, 0.5);
}

#icons g {
  cursor: pointer;
}

#icons rect {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 2px;
  rx: 8px;
  ry: 8px;
}

h1,
h2,
p {
  margin: 0;
}
h2 {
  font-weight: 400;
}
h2 span {
  font-weight: 700;
  color: #5cceee;
}

a {
  background: #5cceee;
  color: white;
  padding: 10px;
  text-decoration: none;
  border-radius: 3px;
  margin-top: 10px;
}

a:hover {
  background: white;
  color: #5cceee;
}

.branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 20px;
}

console.clear();
let targets = gsap.utils.toArray("#icons g");
let targetStarts = [20, 120, 220, 320, 420, 520];
let anim;
let activeDot = 0;
let targetDot;
let maxDur = 0.6;

targets.forEach((obj, i) => {
  obj.index = i;
  obj.addEventListener("click", letsStretch);
});

function letsStretch() {
  targetDot = this.index;
  if (targetDot != activeDot) {
    if (anim && anim.isActive()) {
      anim.progress(1);
    }

    let oldX = targetStarts[activeDot];
    let newX = targetStarts[targetDot];
    let travel = Math.abs(oldX - newX);
    let factor = gsap.utils.mapRange(100, 500, 0.5, 1, travel);
    let dur = maxDur * factor;

    anim = gsap.timeline({ defaults: { duration: dur, ease: "back.in(2)" } });
    if (newX > oldX) {
      anim.to("#stretchy", {
        attr: { width: travel + 60 }
      });

      anim.to(
        "#stretchy",
        { attr: { x: newX, width: 60 }, ease: "back" },
        "+=0.08"
      );
    } else {
      anim.to("#stretchy", {
        attr: { x: newX, width: travel + 60 }
      });
      anim.to("#stretchy", { attr: { width: 60 }, ease: "back" }, "+=0.08");
    }

    anim.to(
      "#stretchy",
      {
        duration: dur,
        ease: "sine.inOut",
        attr: { height: 30, y: 45 },
        yoyo: true,
        repeat: 1
      },
      0
    );
  } else {
    return;
  }

  activeDot = targetDot;
}