TryIt Editor v2.0 - CSS will-change code example

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .circle {
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        border-radius: 30px;
      }
      .circle.blue {
        background: #1c87c9;
        will-change: transform;
      }
      .circle.green {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Will-change property example</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      var circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (var i = 0; i < circles.length; i++) {
          var xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>