I'm trying to reverse how this SVG line animates. I need the line to draw from left to right but can only get it to work right to left. I tried changing the end point in illustrator but this only led to it drawing from both sides. How do I do this? You can see the animation here: http://mckeever02.github.io/voxbit/
This is the SVG:
<svg viewBox="0 0 759.7 234.2">
<path class="phone-line" stroke="#fff" 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>
and the CSS to animate it:
.phone-line {
stroke-dasharray:1400;
-webkit-animation: draw 4s ease-in;
}
@-webkit-keyframes draw {
from {
stroke-dashoffset: 1400;
}
to {
stroke-dashoffset: 0;
}
}
select the path. click Menu -> Path -> Reverse.
SVG supports the ability to change vector graphics over time, to create animated effects. SVG content can be animated in the following ways: Using SVG's animation elements [svg-animation]. SVG document fragments can describe time-based modifications to the document's elements.
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>
Another approach (as mentioned by Paul LeBeau in comments) would be to animate it from -1400
to 0
. This also produces the same output as the above 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: Ideal approach in my view would be to change the direction of your
path
itself to start from the left and move to the right instead of go from right to left. This is only a simple workaround to reverse the direction without altering thepath
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With