1

I have an arrow that I want to animate so I read about animations and I noticed I can achieve this with css keyframes and svg.

So basically I want to draw an arrow from 0 to 100%, so I have a path like:

 <path class="showUp" fill="#4C9FDC" stroke="#000000" stroke-width= "0" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

And I want to animate with stroke like:

@keyframes Arrow {
 from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}


.showUp {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: Arrow 5s linear forwards;
}

CodePen

But it just doing nothing. What am I doing wrong there? Regards

Community
  • 1
  • 1
Leon
  • 13
  • 4
  • First, youa re animating the stroking of your path, its there is none because you did set the `stroke-width` attribute to `0`, then, it will be black, because you did set the `stroke` to `#000000`, finally it will happen only once – Kaiido Jul 12 '19 at 03:22
  • Ohh I understand what happen I changed width and color, so I think I'm using incorrect animation. How can I just draw my original path? I mean draw original arrow. instead trace a border around it? @Kaiido – Leon Jul 12 '19 at 04:16
  • 1
    The total length of the path calculated with `.getTotalLength()` is 196.1. Please use `stroke-dasharray: 196.1; stroke-dashoffset: 196.1;` instead of what you have. – enxaneta Jul 12 '19 at 06:14

2 Answers2

2

Line drawing animations can be achieved in several ways:

  1. Changing the stroke-dashoffset parameters from the maximum equal to the line length to zero: 

body{
  background-color: #272727;
}

@keyframes Arrow {
 from {
    stroke-dashoffset: 196;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes Arrow_Fill {
 from {
    fill: #d3d3d3 ;
  }
  to {
    fill: #FF0000;
  }
}

.showUp {
  stroke-dasharray: 196;
  stroke-dashoffset: 196;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards;
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  <path class="showUp" fill="#4C9FDC" stroke="#FF0000" stroke-width= "4" stroke-linecap="round" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

</svg>
  1. By changing the stroke-dasharray parameters from zero dash and maximum gap to maximum stroke dash and a gap of zero:
@keyframes Arrow {
 from {
    stroke-dasharray: 0,196;
  }
  to {
    stroke-dasharray: 196,0;
  }
}


body{
  background-color: #151515;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 0,196;
  }
  to {
    stroke-dasharray: 196,0;
  }
}
@keyframes Arrow_Fill {
 from {
    fill: #4C9FDC ;
  }
  to {
    fill: #AAD000;
  }
}

.showUp {
  stroke-dasharray: 0,196;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  <path class="showUp" fill="#4C9FDC" stroke="#AAD000" stroke-width= "2" stroke-linecap="round" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>
  1. Drawing two lines from one midpoint: 

body{
  background-color: #151515;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 0,98 0,98 ;
  }
  to {
    stroke-dasharray: 0,0 196,0;
  }
} 

@keyframes Arrow_Fill {
 from {
    fill: #4C9FDC ;
  }
  to {
    fill: #AAD000;
  }
}


.showUp {
  stroke-dasharray: 0,98 0,98;
  stroke-dashoffset:75;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  
 
  <path class="showUp" fill="#4C9FDC" stroke="#FF0000" stroke-width= "2"  d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

</svg>
  1. Dotted line drawing use animation of the mask:

.container{

  background-color: #151515;
  width:100vw;
  height:100vh;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 196,0;
  }
  to {
    stroke-dasharray: 0,196;
  }
} 


.showUp {
  stroke-dasharray: 196,0;
  stroke-dashoffset:75;
  animation: Arrow 4s linear forwards;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="100%"  viewBox="0 0 792 366.94">
 
  
    <defs>  
 <mask id="msk1"> 
    <rect width="100%" height="100%" fill="white" />
   <path class="showUp" fill="white" stroke="black" stroke-width= "1"  d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>
 </mask>
 </defs>
  <path  mask="url(#msk1)" fill="#4C9FDC" stroke="greenyellow" stroke-width= "3" stroke-dasharray="4 2" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

</svg>
</div>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
1

You probably have already figured it out how to achieve what you were looking for, but here's a working pen I created. As you can see, in order to see the stroke animation, I had to remove the fill of the arrow by setting it to "transparent".

For the stroke-dasharray and stroke-dashoffset values, I simply played around with the numbers until I was satisfiied with the behavior, but a more solid approach is using JavaScript as mentioned by @enxaneta. For a more detailed explanation on how SVG line animation works in general, you can reference this article on CSS-Tricks.

Finally, if you're interested in knowing how to animate the fill attribute, you can find a few working examples on this thread.

Hope it helped, have fun with SVGs!

Bruno Mazza
  • 675
  • 1
  • 10
  • 24