I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image.
Below is my code snippet:
svg path {
animation: fadeRight 1s ease-in-out forwards;
}
@keyframes fadeRight {
from {
width: 0
}
to {
width: 100%
}
}<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 694.3" style="enable-background:new 0 0 1000 694.3;" xml:space="preserve"><g><g><g id="Layer_1_1_" class="st6"><g><path class="st5" d="M1273.1,68.1c-0.1-0.3-0.3-0.4-0.5-0.3c-20.7,6.9-78.4,22-149.1,29.4c-51.9,5.4-103.3,6.2-152.7,2.2C909,94.4,850.2,82,795.9,62.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0.1c-32.4,38-68.9,67.5-108.4,87.4c-31.5,15.9-65.1,25.9-99.8,29.6c-47.2,5.1-87.1-3.1-101.6-8.1c0,0-0.1,0-0.1,0c0.1-0.2,0-0.4-0.2-...
If you want to view the live website with the full wire animations, visit this URL:
Note: I understand that path elements cannot have a width attribute, and despite trying various solutions, I have been unable to achieve the desired effect. That's why I am reaching out for help here. Please suggest any alternative animation methods or ideas on how I can animate it.
Animation Request: I specifically require an animation that goes from 0% to 100%, as scaling and translating won't achieve the desired smooth effect I'm looking for. Think of it like a loading progress bar transitioning smoothly from start to finish. The challenge is that the wire is curved, unlike the usual straight loaders. Any assistance would be greatly appreciated as I've hit a roadblock in my progress.