Reverse Svg Line Drawing Animation

Reverse SVG line drawing animation

As you would be aware, the stroke-dasharray property creates a dashed line pattern. When the value is assigned as 1400 it means that the length of the dash and the space between the dashes is 1400. That is for 0 to 1400 the line will be present and from 1400 to 2800 a dash would be present.

Now when you change the stroke-dashoffset from 1400 to 0 it brings the line into view from one direction. Initially the offset is at 1400 and thus only the dash is visible (no line). When the offset is animated to 0, the dash moves out towards the left and the line (that is present from 0 to 1400) slowly comes into view.

A simple method to do it from the other direction would be to animate it from 1400 to 2800. When this is done, the dash moves out towards the right as the line (that is present from 2800 to 4200) slowly comes into view.

.phone-line {  stroke-dasharray: 1400;  animation: draw 4s ease-in;}@keyframes draw {  from {    stroke-dashoffset: 1400;  }  to {    stroke-dashoffset: 2800;  }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><svg viewBox="0 0 759.7 234.2">  <path class="phone-line" stroke="#000" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" /></svg>

How to reverse an animated line in SVG

Here's one way:
http://jsfiddle.net/VTp4D/

Relevant part of SVG file:

<path id="busTrack2" ...>
  <animate id="dashAnim2" attributeName="stroke-dashoffset" from="0" 
   to="0" dur="10s" begin="0" fill="freeze" keySplines="0 0.5 0.5 1" 
   calcMode="spline"/>
</path>

Javascript code:

var busTrack = document.getElementById('busTrack2');
var busTrackAnim = document.getElementById('dashAnim2');
var trackLength = busTrack.getTotalLength().toString();
busTrack.setAttribute('stroke-dasharray',trackLength+','+trackLength);
// forward: 
// busTrackAnim.setAttribute('values',trackLength+';0');
// backward:
busTrackAnim.setAttribute('values','-'+trackLength+';0');

SVG Animation - How can I reverse the start and end points in this svg path?

I've reversed the path and this reversed the animation. Also the path's length is 1932 so in the css i'm using this value instead.

.st0 {  fill: #ffffff;}
.st1 {  fill: none;  stroke: #afafaf;  stroke-width: 4;  stroke-miterlimit: 10;}
.st2 {  fill: #ffffff;  stroke: #afafaf;  stroke-width: 4;  stroke-miterlimit: 10;}
.st3 {  fill: none;  stroke: #2646ff;  stroke-width: 7;  stroke-linecap: round;  stroke-linejoin: round;  stroke-miterlimit: 10;}
#Streep .st3 {  stroke-dasharray: 1932;  stroke-dashoffset: 0;  animation: dash 8s ease-in-out;  animation-direction: reverse;}
@keyframes dash {  to {    stroke-dashoffset: 1932;  }}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 780" style="enable-background:new 0 0 1200 780;" xml:space="preserve">          <g id="Layer_1"></g>          <g id="Layer_6">            <g>              <g>                <path                  class="st0"                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"                />                <path                  class="st1"                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"                />              </g>              <line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />              <ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />            </g>          </g>          <g id="Layer_5">            <g>              <g>                <path                  class="st0"                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"                />                <path                  class="st1"                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"                />              </g>              <line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />            </g>          </g>          <g id="Layer_4">            <g>              <g>                <path                  class="st0"                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"                />                <path                  class="st1"                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"                />              </g>              <line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />            </g>          </g>          <g id="Streep">            <g>              <path class="st3" d="M2,35.9L2,772.2 C2,775 4.2,777.2 7,777.2 L1194.1,777.2" />            </g>          </g>        </svg>

Change direction of SVG animation

I like your idea of making this an loading animation:

CODEPEN

Now what i did:

changed the animation start stop point

@keyframes draw {
  100% {
    stroke-dashoffset: -500;
  }
}

Why -500?
Because this is the value of the dash-array.

This is defined in the <svg>: dasharray="500"

Changed this value in the inner most path. It was only 300

I added a linear animation

animation: draw 5s infinite linear;

The default is ease. I found the animation has better consistency with a linear animation.

NOTE

dashoffset=500 <- makes the animation start without the dash/stroke

How to do an animated dashed svg line?

The standard "line drawing" technique uses a changing dash length to simulate the drawing effect. So obviously, if your line already has a dash pattern, that technique won't work. Not directly at least.

The best solution to this is to apply a <mask> to the dashed line. The mask consists of a line that covers your original one (the dashed one). We then use the standard line drawing dash technique to animate the version of the line in the mask. Thus slowly unmasking/revealing the original dashed line.

// Get a reference to the <path>var path = document.querySelector('#pathRecrut');
// Get length of path... ~577px in this casevar pathLength = path.getTotalLength();
// Make very long dashes (the length of the path itself)path.style.strokeDasharray = pathLength + ' ' + pathLength;
// Offset the dashes so the it appears hidden entirelypath.style.strokeDashoffset = pathLength;
// When the page scrolls...window.addEventListener("scroll", function(e) {   // What % down is it?   // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222  // Had to try three or four differnet methods here. Kind of a cross-browser nightmare.  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);      // Length to offset the dashes  var drawLength = pathLength * scrollPercentage;    // Draw in reverse  path.style.strokeDashoffset = pathLength - drawLength;  });

<svg id="bf7de8ba-cf75-48ab-a36c-06f8d86635d5" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 690.814 824.302">  <defs>    <style>      .a00cb6af-c716-4d00-9962-797e598003da,      .a6fde9f6-9a2f-4715-ac34-678948a4d015,      .b963f74d-80cb-4571-80bd-9cf5cd28cce2 {        fill:none;        stroke-miterlimit:10;        stroke-width:6px;      }      .a6fde9f6-9a2f-4715-ac34-678948a4d015 {        stroke:url(#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0);      }      .b963f74d-80cb-4571-80bd-9cf5cd28cce2 {        stroke-dasharray:30.322 50.536;        stroke:url(#a958eb71-8928-4250-a898-e2a9df336375);      }      .a00cb6af-c716-4d00-9962-797e598003da {        stroke:url(#a8cb66bd-35fa-45ad-b9b6-1af210f764d2);      }    </style>    <linearGradient id="bef7cd12-3404-46dc-ac0f-c9d91ddd83d0" x1="60.835" y1="123.864" x2="751.668" y2="123.864" gradientUnits="userSpaceOnUse">      <stop offset="0" stop-color="#ec6608"/>      <stop offset="0.494" stop-color="#c33089"/>      <stop offset="1" stop-color="#662483"/>    </linearGradient>    <linearGradient id="a958eb71-8928-4250-a898-e2a9df336375" x1="60.835" y1="541.828" x2="751.668" y2="541.828" xlink:href="#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0"/>    <linearGradient id="a8cb66bd-35fa-45ad-b9b6-1af210f764d2" x1="60.835" y1="932.54" x2="751.668" y2="932.54" xlink:href="#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0"/>        <mask id="linemask">      <path id="pathRecrut" fill="none" stroke="white" stroke-width="10" d="M745.947,181.853c-3.573,34.83-7.4,65.457-20.713,85.466-36.276,54.511-150.309,41.2-247.4,29.872-73.484-8.575-74.824-17.343-139.4-21.446-87.16-5.538-141.016-8.96-191.49,24.51-48.083,31.886-87.4,93.472-82.723,159.319.847,11.934,4.189,59.01,39.83,91.915,35.144,32.448,81.33,32.315,131.744,32.171,53.366-.154,56.932-10.359,130.213-18.383,52.244-5.721,100.335-10.606,160.085,1.532,36.964,7.508,74.081,20.657,109.532,43.659,26.491,17.189,49.773,32.776,59.745,62.809,1.48,4.457,13.436,42.337-6.894,72.766-14.348,21.475-39.623,31.524-81.957,36.766-67.779,8.391-105.681-4.654-182.3-16.086-41.6-6.206-132.521-17.593-227.49-.766-22.971,4.071-60.931,12.4-91.149,42.894-7.9,7.968-23.347,23.951-29.872,49.787a99.225,99.225,0,0,0-1.1,42.916"/>    </mask>  </defs>  <path class="a6fde9f6-9a2f-4715-ac34-678948a4d015" d="M748.213,116.426c.215,4.461.381,9.478.436,14.992" transform="translate(-60.835 -116.281)"/>  <path class="b963f74d-80cb-4571-80bd-9cf5cd28cce2" d="M745.947,181.853c-3.573,34.83-7.4,65.457-20.713,85.466-36.276,54.511-150.309,41.2-247.4,29.872-73.484-8.575-74.824-17.343-139.4-21.446-87.16-5.538-141.016-8.96-191.49,24.51-48.083,31.886-87.4,93.472-82.723,159.319.847,11.934,4.189,59.01,39.83,91.915,35.144,32.448,81.33,32.315,131.744,32.171,53.366-.154,56.932-10.359,130.213-18.383,52.244-5.721,100.335-10.606,160.085,1.532,36.964,7.508,74.081,20.657,109.532,43.659,26.491,17.189,49.773,32.776,59.745,62.809,1.48,4.457,13.436,42.337-6.894,72.766-14.348,21.475-39.623,31.524-81.957,36.766-67.779,8.391-105.681-4.654-182.3-16.086-41.6-6.206-132.521-17.593-227.49-.766-22.971,4.071-60.931,12.4-91.149,42.894-7.9,7.968-23.347,23.951-29.872,49.787a99.225,99.225,0,0,0-1.1,42.916" transform="translate(-60.835 -116.281)" mask="url(#linemask)"/>  <path class="a00cb6af-c716-4d00-9962-797e598003da" d="M81.983,925.674a117,117,0,0,0,6.74,13.39" transform="translate(-60.835 -116.281)"/></svg>

Reverse Svg Line Drawing Animation