Transcript
[00:00] Okay, so I have this little circle represented by a div with a class of piece inside of this container represented by a div with a class of container container is positioned relative piece is positioned absolutely. And what I want to do is I just want to bounce this or I want to animate this piece or this circle bouncing around the box. So create something we’re going to call it piece keyframes. This is going to be our array of keyframes. So we’re going to start with a left of 50% and a top of zero. And then we’re going to go to we want to start at the top middle and then we want to go to top well 50% down and all the way over to the right. So we’ll say 100% from the left and the top will be 50%, right? And then we’re going to go to the bottom and the middle. So we’ll go back to 50% on the left and the top will become 100%. And then so that gets us down here and then we need we need to go bounce off this left wall. And so on the left wall we’re going to be back at zero and the top is going to be 50% again. And then top middle, middle right, middle bottom, middle left and then we just need to go back to our first position. I think that’s right. Let’s just give it a try. So piece equals we’ll get our element piece and we’ll animate our first argument will be our piece keyframes. And we’ll throw in our timing object. We’ll give it a duration of let’s just say 1500 and iterations of infinity. Let’s see if that worked.
[02:12] Cool. So when it hits the right and the bottom, it kind of goes outside of the box. So here we’re going to say calc. 100% minus 12 pixels, which is the well, it’s not quite the width, but I know it’ll look better if we just if we don’t quite go 15 because if we go 15 pixels, it’s going to look like it doesn’t quite hit it. So it’s okay to let it go just a little bit outside. I think that’ll be a good visual effect. And we’ll do the same thing on the bottom. Save that. And there we go. Kind of cool. So here’s a whole bunch of keyframes.
[02:50] And one thing we can do, and it’s not super practical in this case, but let’s just say that on the way down, I want it to appear like it’s going faster. I could kind of use easing for this. I could definitely use easing for this. But one thing you can do here, very much like you can do with CSS keyframes where you can say where your keyframe is at percentage wise over your entire timeline, we can do the same thing here with an offset. So if I say that by the time you get to this third keyframe, you should only be 30% through. What that’s going to do is it’s going to make these first three keyframes happen faster than the last two. So if I save that, you can see it looks, it goes a little bit faster on the way down. So at 30%, we’re already at the third keyframe. And then it takes the remaining 70% of the timeline to do the bounce to the left wall and back up to the top.
Master Web Animations API keyframe animations to create a smooth bouncing effect without relying on easing functions. This tutorial shows how to use precise positioning, offsets, and timing to control animation speed and create complex motion paths.
<html><head> <style> body { background-color: #222; } .container { position: relative; width: 500px; height: 500px; border: 1px solid #fff; margin: 0 auto; } .piece { position: absolute; background-color: white; border-radius: 100%; width: 15px; height: 15px; } </style></head><body> <div class="container"> <div class="piece"></div> </div>
<script> const pieceKeyframes = [ { left: "50%", top: 0 }, { left: "calc(100% - 12px)", top: "50%" }, { left: "50%", top: "calc(100% - 12px)", offset: 0.3 }, { left: 0, top: "50%" }, { left: "50%", top: 0 } ];
const pieceAnimation = document.querySelector(".piece").animate( pieceKeyframes, { duration: 1500, iterations: Infinity } ); </script></body></html>