<div class="hero">
<!--   <h1>UX / UI Designer & Developer Working in Detroit.</h1> -->
  <div class="hero-sides hero-sides__left">
    <svg id="letters" viewBox="0 0 249 336" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient x1="0%" y1="100%" y2="0%" id="c">
          <stop stop-color="#CC1F6B" offset="0%"/>
          <stop stop-color="#EA2E49" offset="100%"/>
        </linearGradient>
      </defs>
      <g fill="none" fill-rule="evenodd">
        <path d="M161.355378 148.911204c-4.296177 65.941603 101.475407 141.35469 54.317463 179.481927-47.157945 38.127236-199.3927934-79.119043-213.27600595-160.595429C-6.8712003 113.4064 21.0440987 68.967946 78.2878464 34.8400698 135.531594.7121935 250.253191-20.1449618 248.27034 29.6344829c-2.484691 62.3781398-82.618785 53.3351194-86.914962 119.2767211z" fill="url(#c)"/>
        <path d="M214.28601 265.212963c-20.150496-35.743853-55.448849-77.64989-52.930632-116.301759 2.400784-36.849395 28.4841-50.2827236 51.465352-65.848805C212.168134 83.0208997 211.487116 83 210.776664 83c-29.167368 0-108.925147 22.330734-97.702556 73.464879 11.222591 51.134145 64.36486 82.85026 97.702556 106.475529 1.249776.885673 2.418108 1.641227 3.509346 2.272555z" fill="#D41054"/>
      </g>
    </svg>
  </div>
  <div class="hero-sides hero-sides__right">
    <svg id="letters" viewBox="0 0 266 410" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="s">
          <stop stop-color="#77D3BE" offset="0%"/>
          <stop stop-color="#F4F696" offset="100%"/>
        </linearGradient>
      </defs>
      <g fill="none" fill-rule="evenodd">
        <path d="M.87931238 363.749719C1.16847066 409.057284 111.464934 418.597927 167.52531 401.584132c75.607939-22.946295 106.999298-65.968585 95.101424-129.428707-10.623157-56.661115-143.429674-92.888912-133.845275-150.175802 9.584399-57.2868906 108.198936-62.4677071 107.075058-99.338216C235.195524.956539 218.66489-4.5455917 173.723175 4.19308646 128.781459 12.9317646 67.9642938 66.3347979 56.0722284 101.913028c-25.7247719 76.962397 69.7347626 116.260024 69.7347626 170.242397 0 53.982374-125.25817512 39.809534-124.92767862 91.594294z" fill="url(#s)"/>
        <path d="M68.7728109 317.049818c29.3210232-9.190199 57.0341801-19.502684 57.0341801-44.894393 0-26.125248-22.358168-48.811091-42.5177078-73.991398.2958005.103554.6224949.256875.9817197.46204 11.900474 6.79675 87.9120701 54.373998 75.3532031 88.034092-12.558868 33.660093-73.6846012 30.423546-89.5645528 30.423546-.4811505 0-.9091722-.011231-1.2868429-.033887zM162.3181 78.1257165c-16.559791 10.7565197-30.257843 24.2562095-33.536641 43.8539065-3.528582 21.090683 12.242648 39.326995 34.111263 56.779435-.459901.057543-1.049179-.077364-1.785107-.426086-10.245391-4.854822-61.4723492-35.278368-53.209937-62.141712C116.160091 89.3279161 149.60834 78 161.107615 78c.449818 0 .852308.0426101 1.210485.1257165z" fill="#A1DEBF"/>
      </g>
    </svg>
  </div>
</div>

* {
  padding: 0;
  margin: 0
}

body {
  background-color: #333745;
}

.hero {
  display: flex;
/*   border-radius: 100%;
  overflow: hidden; */
}

.hero h1 {
  background: white;
  font-family: karla;
  font-size: 3rem;
  width: 100%;
  max-width: 700px;
  padding: 2rem;
  line-height: 1.5;
  display: block;
  position: absolute;
  transform:translateY(5rem) translateX(5rem)
}

.hero-sides {
  height: 0;
  width: calc(50% / 1);
  display: flex;
  align-items: center;
  transition: all 900ms cubic-bezier(.46,.03,.52,.96);
}

.hero-sides:hover {
  width: calc(75% / 1);
}

.hero-sides svg {
  transition: all 1s cubic-bezier(.65,.05,.36,1)
}

.hero-sides__left {
  background-image: linear-gradient(45deg, #77D3BE 0%, #F4F696 100%);
}

.hero-sides__left:hover svg {
  transform: translateX(3rem) !important;
}

.hero-sides__right {
  background-image: linear-gradient(-45deg, #CC1F6B 0%, #EA2E49 100%);
}

.hero-sides__right:hover svg {
  transform: translateX(-4rem) !important;
}

#letters {
  padding: 1.5rem;
  max-width: 250px;
  min-width: 200px;
  margin: auto;
  transform: scale(0)
}

var tl = anime.timeline({});

tl
.add({
  targets: '.hero-sides__left',
  height: [0, '100vh'],
  easing: 'easeInOutSine',
  duration: 200
})
.add({
  targets: '.hero-sides__right',
  height: [0, '100vh'],
  easing: 'easeInOutSine',
  duration: 200
})
.add({
  targets: '#letters',
  scale: [0, 1],
  easing: 'easeInOutSine',
  duration: 200,
  delay: function(el, i) { return i * 150 },
  elasticity: function(el, i, l) {
    return (200 + i * 200);
  }
})
// .add({
//   targets: ['.hero-sides', 'svg'],
//   scale: 1,
//   easing: 'easeInOutSine',
//   duration: 200,
//   delay: function(el, i) { return i + 650 },
// })
// .add({
//   targets: ['.hero-sides'],
//   height: [100, '30vh'],
// })
// .add({
//   targets: '#letters',
//   duration: 100,
//   scale: .5,
// })