Name: Web Animations API: playbackRate
Description: Master dynamic animation control with the Web Animations API playback rate feature

Master dynamic animation control with the Web Animations API playback rate feature

Master dynamic animation control with the Web Animations API playback rate feature, enabling precise speed adjustments for web design projects. This tutorial solves common frontend development pain points by demonstrating how to build interactive UI components with real-time animation speed manipulation using JavaScript event listeners and HTML range inputs.

<html>
<head>
  <style>
    body {
      background-color: #222;
    }
    .container {
      display: flex;
      justify-content: center;
    }
    .circle {
      width: 200px;
      height: 200px;
      border-radius: 100%;
      border: 4px solid #fff;
      border-top: 4px solid blue;
    }
    #playback {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #current {
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="circle"></div>
  </div>
  <div id="playback">
    <div>
      <input value="0" id="range" type="range" min="0" max="1000" step="1">
    </div>
    <div id="current">0</div>
  </div>

  <script>
    const myAnimation = document.querySelector(".circle").animate(
      [
        {
          transform: "rotate(0)"
        },
        {
          transform: "rotate(359deg)"
        }
      ],
      {
        duration: 1000,
        iterations: Infinity
      }
    );

    myAnimation.pause();

    document.getElementById("range").addEventListener("input", e => {
      const value = e.target.value;
      document.getElementById("current").innerText = value;
      myAnimation.currentTime = +value;
    });
  </script>
</body>
</html>