Home/ Questions/Q 9237981
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T07:39:13+00:00

I want to make complex animation timeline in my svg. For example, I have

  • 0

I want to make complex animation timeline in my svg. For example, I have 3 rectangles, and I want to show them sequentially and than restart animation.
Here it is: http://jsbin.com/opuguh/3/edit
More complex, and my ultimate target is to have quads shown like this

seconds    0        1        2   
quad 1  inline   inline    none  
quad 2   none    inline   inline 
quad 3  inline    none    inline

so always display 2 quads, each second one of them disappearing for a second. But they should not be dependent on each other. Is there a way to do it?

If I put it in other way:

  • quad1: start at 0s, display for 2s
  • quad2: start at 1s, display for 2s
  • quad3: start at 2s, display for 1s
  • quad3: start at 0s, display for 1s
  • repeat everything when time reaches 4s
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found answer myself. Trick is using keyTimes, Set it to "0;{start};{end};1", where {start} and {end} are time fraction when you want to show or hide element (timeInSeconds/duration). In this way, all of them are independent, kind of like a timeline 🙂

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Svg animation</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100">
  <rect x="10" y="10" width="50" height="50" fill="green">
  <animate
      attributeName="display"
      values="none;inline;none;none"
      keyTimes="0;0;0.4;1"
      dur="3s"
      begin="0s" repeatCount="indefinite" />
  </rect>
  <rect x="50" y="50" width="50" height="50" fill="red"  >
  <animate
      attributeName="display"
      values="none;inline;none;none"
      keyTimes="0;0.3333;0.666;1"
      dur="3s"
      begin="0s" repeatCount="indefinite" />
  </rect>
  <rect x="90" y="10" width="50" height="50" fill="blue" >
  <animate
      attributeName="display"
      values="none;inline;none;none"
      keyTimes="0;0.6666;1;1"
      dur="3s"
      begin="0s" repeatCount="indefinite" />
  </rect>
</svg>

    • 0