MENU


Web Animation

Using JavaScript, we can animate DOM elements in a way similar to animating with CSS Keyframes.

A rotating square with a changing color. In the future, other effects such as SequenceEffects or GroupEffects might be possible
RESETRUNFULL
<!DOCTYPE html><html><body style="height:800px">
<div style='margin:250px;'></div>
<script>
    const effect = new KeyframeEffect(document.querySelector('div'),[
       {easing:'ease-in', width:'100px', height:'100px', background:'red', transform:'rotate(0deg)'},
       {offset:0.8, width:'300px', height:'300px', background:'green', transform:'rotate(120deg)'},
       {offset:1, width:'500px', height:'500px', background:'blue', transform:'rotate(240deg)'},
    ],{duration: 3000,
       iterations: Infinity,
       direction: 'alternate'
    });
    const timeline = new DocumentTimeline({ originTime: 2500 });
    const anim = new Animation(effect,timeline);
    anim.play();
    // anim.pause();
    // anim.reverse();
    // anim.cancel();
    // anim.finish();
</script></body></html>
This shows a 'whirlpool' of rotating dots. Note how we can call the animate() function on a DOM element directly.
RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
body {
   background: #0e7cf0;
   margin: 16px;
   color: white;
}
.circle {
   background: #2a2a2a;
   border-radius: 50%;
   width: 10px;
   height: 10px;
   position: absolute;
   top: 50vh;
   left: 50vw;
}
</style></head>
<body style="height:800px">
<script>
   var layers = 9;
   var start = 4;
   for (var i = 1; i <= layers; i++) {
      var n = i * start;
      for (var j = 0; j < n; j++) {
         addCircle(i, j / n);
      }
   }
   function addCircle(layer, fraction) {
      var element = document.createElement('div');
      element.classList.add('circle');
      element.layer = i;
      element.fraction = j / n;
      var rotate = 'rotate(' + (360 * element.fraction) + 'deg)';
      var translate='translate('+(element.layer * 20-2.5)+'px)';
      element.style.transform = rotate + ' ' + translate;
      element.animate([
         {transform: rotate + ' rotate(0deg) ' + translate},
         {transform: rotate + ' rotate(360deg) ' + translate},
      ], {duration: 1000 * layer,
          iterations: Infinity,
      });
      document.body.appendChild(element);
   }
</script></body></html>