Part 3: Exits

What will happen if you have more circle elements in your markup than you do in your array?

E.g. 5 circles in the markup, but only 3 array values? 


      <svg id="svg-1" class="frame">
        <circle cx="30" cy="200" r="10" fill="DarkOrange"></circle>
        <circle cx="60" cy="200" r="10" fill="DarkOrange"></circle>
        <circle cx="90" cy="200" r="10" fill="DarkOrange"></circle>
        <circle cx="120" cy="200" r="10" fill="DarkOrange"></circle>
        <circle cx="150" cy="200" r="10" fill="DarkOrange"></circle>
      </svg>

Scroll down to find out!

I've added 5 orange circles into the markup. The data+code remain the same.

'Exiting' the element

We can determine what happens when element no longer has a pair in the data.

Check out the docs!


Back Next