While CSS animations are ideal for many UI transitions, JavaScript animations offer unmatched flexibility and control. From animating along custom paths to synchronizing complex sequences and interacting with Canvas elements, JavaScript unlocks creative possibilities that CSS alone can't handle.

In this article, we’ll explore how to implement performant JavaScript animations using practical examples, discuss the challenges developers often face, and share tech tips to help you animate with confidence.
Why Use JavaScript for Animations?

Unlike CSS, JavaScript allows:

Custom timing functions beyond cubic Bézier curves.

Dynamic control over animation state.

Fine-grained control over Canvas or SVG animations.

Real-time responsiveness to user input.

Getting Started: setInterval-Based Animation

The classic approach is using setInterval() to update an element’s position incrementally. Here's an example that moves an image 400px to the right over 2 seconds:

train.onclick = function() {
let start = Date.now();

let timer = setInterval(function() {
let timePassed = Date.now() - start;
train.style.left = timePassed / 5 + 'px';

if (timePassed > 2000) clearInterval(timer);

}, 20);
};

Tech Tip: Use intervals of ~20ms (i.e., 50fps) for smooth motion. However, system load can cause frames to drop, leading to jittery visuals.

The Problem with setInterval

When using multiple setInterval calls for different animations, browser repaints become inefficient. Each interval runs independently, potentially triggering multiple layout recalculations.
The Inefficient Way:

setInterval(animate1, 20);
setInterval(animate2, 20);
setInterval(animate3, 20);

The Better Way:

setInterval(function() {
animate1();
animate2();
animate3();
}, 20);

But there’s an even better solution...
requestAnimationFrame: The Modern Way

requestAnimationFrame() tells the browser to run your animation just before the next repaint. It’s smarter, syncs with the display refresh rate, and reduces CPU usage.
Example:

function animateFrame(time) {
// Perform animation logic here
requestAnimationFrame(animateFrame); // Loop
}
requestAnimationFrame(animateFrame);

Tech Tip: Always prefer requestAnimationFrame() over setInterval() for smoother, battery-friendly animations.

Structured Animations with requestAnimationFrame

A universal animation function using requestAnimationFrame can simplify your codebase and offer maximum reusability:

function animate({timing, draw, duration}) {
let start = performance.now();

requestAnimationFrame(function animateFrame(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;

let progress = timing(timeFraction);
draw(progress);

if (timeFraction < 1) {
  requestAnimationFrame(animateFrame);
}

});
}

Example: Animate Width from 0% to 100%

animate({
duration: 1000,
timing(timeFraction) {
return timeFraction; // linear
},
draw(progress) {
document.getElementById('box').style.width = progress * 100 + '%';
}
});

Real-World Challenges & Pro Tips
🧩 Challenge 1: Timing Curve Complexity

Solution: Write custom timing() functions to simulate bounce, ease-in-out, or spring-like motions.

function easeOutBounce(timeFraction) {
for (let a = 0, b = 1; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2);
}
}
}

🧩 **Challenge **2: Frame Drops on Tab Inactivity

Solution: requestAnimationFrame automatically pauses in background tabs. Design logic to gracefully resume or reset.
🧩 Challenge 3: Synchronizing Multiple Animations

Solution: Use a single requestAnimationFrame loop to update multiple elements together, reducing layout thrashing.

function masterLoop(time) {
animate1(time);
animate2(time);
requestAnimationFrame(masterLoop);
}
requestAnimationFrame(masterLoop);

Conclusion

JavaScript animations offer full creative control for interactive and dynamic experiences. By using requestAnimationFrame() and structuring animations with reusable logic, you can achieve performance and precision beyond CSS.

Whether you're animating trains across the screen or crafting interactive infographics, JavaScript is your canvas—and the only limit is your imagination.

Next Steps:__

Explore animation libraries like GSAP or anime.js for more power.

Combine animations with user interactions and Canvas APIs for games and visualizations.

Benchmark performance using DevTools “Performance” tab.

Happy Animating! 🚂

By AIDOMOAN SENAKPON GODFROY –Tech Writer | Developer | Animation Enthusiast