12.3 Synchronizing animations

Instead of defining each animation's start time as the document loading time, you can tie an animation's beginning time to the beginning or end of another animation.

Example 1. Synchronizing anomations

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org2000">
  <circle cx="60" cy="60" r="30" style="fill:#f9f; stroke:gray;">
    <animate id="c1"
      attributeName="r"
      attibuteType="XML"
      from="30" to="10"
      begin="0s" dur="4s"
      fill="freeze"/>
  </circle>
  <circle cx="120" cy="120" r="30" style="fill:#9f9; stroke:gray;">
    <animate
      attributeName="r"
      attibuteType="XML"
      from="10" to="30"
      begin="c1.end" dur="4s"
      fill="freeze"/>
  </circle>
</svg>

It is also possible to add an offset to a synchronization. To make an animation start 2 seconds after another animation, you would use a construction of the form begin="otherAnim.end+2s". (You may add whitespace around the plus sign.)

Example 2. Synchronization of animations with offsets

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000">
  <circle cx="60" cy="60" r="30" style="fill:#f9f; stroke:gray;">
    <animate id="c2"
      attributeName="r"
      attibuteType="XML"
      from="30" to="10"
      begin="0s" dur="4s"
      fill="freeze"/>
  </circle>
  <circle cx="120" cy="60" r="30" style="fill:#9f9; stroke:gray;">
    <animate
      attributeName="r"
      attibuteType="XML"
      from="10" to="30"
      begin="c2.begin + 1.5s" dur="4s"
      fill="freeze"/>
  </circle>
</svg>