<head>
<style>
#square {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
left: 0;
top: 50px;
}
</style>
</head>
<body>
<div id="square"></div>
<script>
const square = document.getElementById('square');
let start = null;
const duration = 2000; // Animation duration in milliseconds
function easeOutQuad(t) {
return t * (2 - t);
}
function animate(timestamp) {
if (!start) start = timestamp;
let elapsed = timestamp - start;
let progress = Math.min(elapsed / duration, 1);
let easedProgress = easeOutQuad(progress);
square.style.left = (window.innerWidth - 50) * easedProgress + 'px';
if (progress < 1) {
requestAnimationFrame(animate);
}
}