Name: Web Animations API: Reverse
Uploaded: 2026-07-16
Description: Learn how to create a smooth loading spinner with reverse playback functionality using waapi.

Learn how to create a smooth loading spinner with reverse playback functionality using waapi.

Transcript

[00:00] So we’ve got this groovy little animation going on here we can pause it we can play it. I want to take a look at the reverse functionality so in order to see that we really need to have something we could reverse so I’m gonna set up our circle with a border of one pixel solid white right but then I’m gonna say border top is one pixel solid blue so let’s see yeah I can see it there.

[00:40] We’re gonna come down here we’re gonna get rid of the change in color so now you’re gonna see our circle and I’m gonna get rid of that background color so there’s our circle. Let’s bump this up so we can see it better it’s like four pixels okay so there’s our circle we don’t need it to animate up and down instead we’re gonna rotate it whoops rotate and here we’ll go 359 degrees so we’re gonna rotate from 0 to 359 degrees.

[01:17] Now we got like this kind of spinner looking thing again this is just a div it’s a box that has one side of its border colored in as blue and then we’ve given it a border radius. I don’t want to alternate any longer I just wanted to go forward and I don’t need this easy and I just wanted to continue going forward cool.

[01:47] So now let’s add another button here this will be for reverse and we’ll just come down to our event listeners and we’ll create a new one for our reverse button and we’ll just say my animation reverse so there’s a new button button and let’s yeah whatever it’s a little close to this button so it looks weird but I’m just gonna say reverse and now it is playing in reverse.

Learn how to create a smooth loading spinner with reverse playback functionality using waapi. Build an engaging interface element with a rotating border animation that responds to user interaction.

<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;
    }
    button {
      font-size: 48px;
      margin-bottom: 25px;
    }
  </style>
</head>
<body>
  <button class="pause">Pause</button>
  <button class="play">Play</button>
  <button class="reverse">Reverse</button>
  <div class="container">
    <div class="circle"></div>
  </div>

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

    document.querySelector(".pause")
      .addEventListener("click", () => myAnimation.pause());
    document.querySelector(".play")
      .addEventListener("click", () => myAnimation.play());
    document.querySelector(".reverse")
      .addEventListener("click", () => myAnimation.reverse());
  </script>
</body>
</html>