It is common knowledge that the stroke-dasharray property is used to create a dashed line pattern. When set to 1400, it indicates that the length of the dash along with the space between dashes is 1400. This means that from 0 to 1400, the line will be visible and from 1400 to 2800, a dash will appear.
Changing the value of stroke-dashoffset from 1400 to 0 brings the line into view in one direction. Initially, the offset is at 1400, making only the dash visible (no line). When animated to 0, the dash moves towards the left, gradually revealing the line present from 0 to 1400.
To achieve the same effect in the opposite direction, you can animate it from 1400 to 2800. As a result, the dash moves towards the right while the line visible from 2800 to 4200 slowly becomes apparent.
.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>
Another method suggested by Paul LeBeau involves animating the offset from -1400 to 0, achieving the same outcome as the previous snippet.
.phone-line {
stroke-dasharray: 1400;
animation: draw 4s ease-in;
}
@keyframes draw {
from {
stroke-dashoffset: -1400;
}
to {
stroke-dashoffset: 0;
}
}
<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>
Note: My recommendation would be to alter the starting direction of your path itself to move from left to right instead of right to left. This workaround provides a simple way to reverse the direction without modifying the original path.