Animated SVG Animation - Squishy Effect

Question

*** Update - The solution listed below

I got a svg animation error. I could use some expert help.

I'm trying to create a similar animation that you can see here ( http://springsummer.dk/ ) when you hover over part of your work (maybe halfway down the page) - the line comes and goes, and then the squishes look at the correct height.

I reproduced this effect as a simple code pen, which can be seen here: https://codepen.io/callmegoon/pen/EQRMjG (see code below).

However, in my testing, I came to the conclusion that Safari does not support the negative barcode that Im uses in the animation.

Soooo, I'm trying to find a new solution - any ideas? Completely open in a completely different way to accomplish this (maybe js solution?), But all I do is not working. My biggest problem is the squishy part at the end where the back / bottom line of the line appears - I did not understand another way to achieve this without a negative hit-dashoffset.

Thank!

/* Draw Line Animations */
  @keyframes drawLine {
    0% {
      stroke-dasharray: 170;
      stroke-dashoffset: 170;
    }
    
    100% {
      stroke-dasharray: 170;
      stroke-dashoffset: -50;
    }
  }

  @keyframes unDrawLine {
    0% {
      stroke-dasharray: 170;
      stroke-dashoffset: -50;
    }
    
    100% {
      stroke-dasharray: 170;
      stroke-dashoffset: 170;
    }
  }

.box {
  background: red;
  width: 500px;
  height: 500px;
  position: relative;
}

.box:hover .line {
  animation: drawLine .6s cubic-bezier(.67,.02,.27,.95) forwards;
}

.line {
  width: 4px;
  height: 170px;
  fill: none;
  stroke: #fff;
  stroke-width: 4px;
  transform: rotate(195deg);
  display: block;
  position: absolute;
  left: 50px;
  bottom: 50px;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: unDrawLine .6s cubic-bezier(.67,.02,.27,.95) forwards;
}

<div class="box">
  <svg class="line" viewBox="0 0 4 170" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="0" y2="170" />
  </svg>
</div>

Run codeHide result

---

Solution (uses GreenSock)

I managed to find a solution that would ideally match the effect that I was going to while working in Safari - it just required a GSAP and a drawing plugin.

The demo version of the solution is here ... https://codepen.io/anon/pen/MQqwdo

Explanation of the solution ... The hack / fix / trick just slightly enlivens one of the coordinates of the points in the line - not noticeable to users.

Answer 1

/, :

.box {
  background: red;
  width: 500px;
  height: 500px;
  position: relative;
}

.box:hover .line {
   transform: rotate(25deg) scale(1,1);
   bottom:80px;
   left:80px;
}

.line {
  width: 4px;
  height: 170px;
  fill: none;
  stroke: #fff;
  stroke-width: 4px;
  transform: rotate(25deg) scale(1,0);
  transform-origin:bottom;
  transition:.6s cubic-bezier(.67,.02,.27,.95);
  display: block;
  position: absolute;
  left: 50px;
  bottom: 50px;
}

<div class="box">
  <svg class="line" viewBox="0 0 4 170" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="0" y2="170" />
  </svg>
</div>

Hide result