Animation using the clip property

iris iris

There's an old trick since the Netscape 3 days where, by repeatedly changing an image's src property through script, the image could be animated. This meant preloading all the images for the animation sequence and then starting the animation. This could be tricky since the images would load in random order and determining the point where all the images had loaded was haphazard at the best of times. But, using CSS and a bit of script, it can also be done with one image.

Taking two strips of image sequences, an iris sequence:

iris

and a spinner sequence:

spinner

and by varying the images' clip and left CSS properties using script like so

   document.getElementById('iris1').idx = 0;

function openIris()
{
   var iris1 = document.getElementById('iris1');

   var newClipLeft, newClipRight;
      newClipLeft  = 39 * iris1.idx;
      newClipRight = 39 + 39 * iris1.idx;
   iris1.style.clip = 'rect(0px ' + newClipRight + 'px 39px ' + newClipLeft + 'px)';
   iris1.style.left = (25 - newClipLeft) + 'px';

   if (iris1.idx < 13)
   {
      iris1.idx++;
      setTimeout(openIris, 75);
   }
}

where 39 is the image's width and 25 is the image's left padding, the image is animated.