Katy93,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 5 Canvas</title>
<style type="text/css">
html,
body {
margin: 0px;
}
canvas {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<canvas id="canvas">
Your browser does not support HTML5 canvas. If you would
like to view, please update your browser.
</canvas>
<script>
Rectangle = function(x, y, w, h) {
this.x = x;
this.y = y;
this.yy = y;
this.width = w;
this.height = h;
this.to = [205, 15];
this.draw = function(ctx) {
ctx.fillStyle = "#000";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext("2d");
function anim(a) {
function e(b) {
context.clearRect(a.x, a.y, a.width, a.height)
var k = .03;
a.yy += (a.to[0] - a.yy) * k;
a.y = Math.trunc(a.yy)
a.draw(context);
if (Math.abs(a.yy - a.to[0]) < .05) {
a.to.reverse();
anim(a)
} else requestAnimationFrame(e)
}
requestAnimationFrame(e)
}
for (var i = 0; i < 10; i++) {
let rect = new Rectangle(50 + i * 30, 50, 20, 40);
window.setTimeout(_ => anim(rect), i * 100)
}
</script>
</body>
</html>