requestAnimationFrame() schedules a callback for repeated animation updates. JavaScript can use each callback to calculate a new position, apply a CSS transform, and request the next frame. section 1.2.3 section 9.2.2
A typical animation loop connects timing, geometry, and presentation:
- Update a changing value such as an angle; smaller speed values slow motion, larger values accelerate it, and negative values reverse direction. section 9.2.2
- Calculate coordinates with Math.cos() and Math.sin(), using the center and radius to place the element on a circular path. section 9.2.2
- Apply the coordinates through a CSS transform, then call requestAnimationFrame() again to continue the animation. section 9.2.2
- Throttle scroll-driven updates by allowing one requestAnimationFrame() callback at a time. section 10.2.4
Listing 9.3 Circular path animation with JavaScript
function animateInACircle(element, centerX, centerY, radius, speed) {
let angle = 0;
function animate() {
angle += speed; #1
const x = centerX + radius * Math.cos(angle); #2
const y = centerY + radius * Math.sin(angle); #3
element.style.transform = `translate(${x}px, ${y}px)`; #4
requestAnimationFrame(animate); #5
}
animate();
}
Inspect a complete circular-motion loop that updates an angle, calculates x and y coordinates, transforms an element, and schedules the next frame. section 9.2.2
