SVG animations not chaining correctly

StackOverflow https://stackoverflow.com/questions/23438410

  •  14-07-2023
  •  | 
  •  

Question

I have the following svg and I am trying to animate the shape.

<svg class="svg" viewBox="0 0 100 100">
  <path fill="white">
    <animate id="close" begin="0s;open.end" attributeName="d" dur="1s"
             from="..." to="..." />
    <animate id="open"  begin="close.end"   attributeName="d" dur="1s" 
             from="..." to="...0" />
  </path>
</svg>

The problem I am facing is that the 1st animation (#close) only happens once at the start then never again. The second animation (#open) repeats as normal.

Here's a codepen with my code and simpler animation I based mine off of (which works correctly)

http://codepen.io/dogoku/pen/yxKjs

Thanks for any help

Was it helpful?

Solution

One way would be to put it in the same animation

<animate id="close" begin="0s" repeatCount="indefinite" attributeName="d" dur="2s"
    values="M 0,0  L 100,0 100,50 100,100 0,100 0,50; M 0,50  L 100,50 75,50 100,
    50 0,50 25,50; M 0,50  L 100,50 75,50 100,50 0,50 25,50; M 0,0  L 100,0 100,
    50 100,100 0,100 0,50" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top