Source Code:
(back to article)
Submit
Result:
Report an issue
<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); } } requestAnimationFrame(animate); </script> </body>