Search code examples
animationsvgsvg-animate

animation not animating instead jumping to end

I am trying to use the SVG animate tag to change the path from a half fill to a complete fill

        <svg class="background-gradient" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
                <linearGradient id="grad">
                    <stop offset="0%" stop-color="rgba(82,181,244,.1)" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="rgba(70,215,255,.7)" stop-opacity="1"></stop>
                </linearGradient>
            </defs>
            <path id="scroll-path" d="M0 0 H100 v 100" fill="url(#grad)">
                <animate attributeName="d" from="M0 0 H100 v 100" to="M0 0 H100 L100 100 L0 100" dur="1s" repeatCount="indefinite" />
            </path>
        </svg>

Currently it just jumps from the beginning to the end of the animation and does not show the smooth fill I was hoping for in between.

Any ideas?

Solution

  • For an animation to be smooth the path must have the same number and types of commands.

    Your first path has 3 commands M H v

    Your second path has 4 commands M H L L

    You'll need to write the first path using 2 L commands instead of the v or the second as a v instead of the two L commands.