How to make the animation smooth in the below SVG? - svg

Question

Im trying to make the below svg animation smooth. I would want to make the white gradient to move through the path indefinitely. Any suggestions would be very helpful.
<svg width="8" height="243" viewBox="0 0 8 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L3 240" stroke="url(#paint0_linear)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse">
<stop offset="0" stopColor="#E8FF00" stopOpacity="1">
<animate attributeName="stop-opacity" values="1;1;1;0;0;0.5;0.8;1;1;1;1;1" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="0.3" stopColor="#E8FF00" stopOpacity="0">
<animate attributeName="offset" values="0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4;0.3" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="0.4" stopColor="#E8FF00" stopOpacity="0">
<animate attributeName="offset" values="0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="0.5" stopColor="#E8FF00" stopOpacity="0">
<animate attributeName="offset" values="0.5;0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="1" stopColor="#E8FF00" stopOpacity="1">
<animate attributeName="stop-opacity" values="1;1;1;1;0.8;0.5;0;0;0;1;1;1" dur="1s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
</svg>

Answer 1

Consider solving a gradient animation using gradientTransform
Below is the code showing the position of the white bar in the static version
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%"" >
<stop offset="0%" stop-color="grey" />
<stop offset="43%" stop-color="grey" />
<stop offset="50%" stop-color="white" />
<stop offset="57%" stop-color="grey" />
<stop offset="100%" stop-color="grey" />
</linearGradient>
</defs>
</svg>
Add an animation command to move the entire gradient from top to bottom
<animateTransform attributeName="gradientTransform" ... />
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
<stop offset="0%" stop-color="grey" />
<stop offset="43%" stop-color="grey" />
<stop offset="50%" stop-color="white" />
<stop offset="57%" stop-color="grey" />
<stop offset="100%" stop-color="grey" />
<animateTransform attributeName="gradientTransform"
type="translate"
from="0 -1"
to="0 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
</svg>
Update
#tejash jl comments:
animationTransform is not working on line path
I changed your path a little
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L3 240 L6 240 L6 3z" fill="url(#paint0_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
<stop offset="0%" stop-color="grey" />
<stop offset="43%" stop-color="grey" />
<stop offset="50%" stop-color="white" />
<stop offset="57%" stop-color="grey" />
<stop offset="100%" stop-color="grey" />
<animateTransform attributeName="gradientTransform"
type="translate"
from="0 -1"
to="0 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
</svg>
The path must be closed for the gradient animation to work. But you can also select a polyline and apply a gradient to the line
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<polyline points="3,3 3,240" stroke="url(#paint0_linear)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse" >
<stop offset="0" stop-color="grey" />
<stop offset=".43" stop-color="grey" />
<stop offset=".50" stop-color="white" />
<stop offset=".57" stop-color="grey" />
<stop offset="1" stop-color="grey" />
<animateTransform attributeName="gradientTransform"
type="translate"
from="0 -240"
to="0 240"
begin="0s"
dur="1.5s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
</svg>