Name: Web Animations API: playbackRate
Uploaded: 2026-07-16
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

Transcript

[00:00] So here we’re going to mess with the playback rate feature of the web animations API. I’m going to create a div, we’ll say this an id of playback that’ll work inside of here. We’re going to have an input for the type of range, it’s going to have a min of 0.5, a max of let’s say seven just picking something there, and then the step will be 0.5 so along this we’ll be able to move 0.5 increments at a time. Uh, I want to output that here so let’s say I’m going to wrap this in a div and then we’ll do a little flex box on this guy.

[00:42] So here’s the other div and I’ll just give this an id of current, I guess, and I’ll go ahead and give this an id as well. Uh, I’ll just call it range because I’m lazy. Let’s come up here we’re going to say playback, oops, and it’ll be display flex, uh, center on the justify and align item center. So cool and let’s set this value equal to one and we’ll just drop that in there. Uh, I think we need a color. There we go. Sorry, this is a lot of setup for something so simple.

[01:46] All right, so uh, there and the idea is that when we move this this uh number should change. So let’s just set up our event listener. Come down here uh, what do we call it? I think we just called it range. Add event listener on the input, we’ll take in the event and then we call that current. And we’re gonna say let’s kind of get that value off of that and we’ll just say this is equal to the value. Try that out really quick, make sure I didn’t mess anything up. Okay, so it’s updating and uh, and all we need to do is take our animation and say its playback rate is equal to and I’m going to add a little plus here to make sure that our value, oops, our value is in fact a number.

[03:03] Save that, let me clean this up and so we’re at one and now if we go to seven. Oh, it’s pretty fast. 1.5, two, a little faster. If we come down to half speed we can see it’s playing much slower.

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>