Animation Performance: Why 60fps Isn't Enough Anymore

We've been obsessed with 60fps for a decade. It became the golden standard-the number we all chased. Build an interface at 60fps and you'd look like a performance guru. But here's what nobody wants to admit: we're living in a post-60fps world. Your users have 120Hz displays. They're comparing your animations to native iOS apps. And 60fps? That's starting to feel... sluggish.

The 120Hz Reality Check

Premium phones and tablets now come with 120Hz displays as standard. That's double the refresh rate of the old 60Hz monitors we've been optimizing for. When a user scrolls through your app on a 120Hz device, they're not consciously thinking about frame rates. But they feel the difference immediately. A 60fps animation on a 120Hz display looks janky. It looks cheap. It looks broken.

This isn't elitism or specs for specs' sake. Your users are holding devices that are literally twice as fast as what we were targeting five years ago. Ignoring that is like building a website for 2010-era internet speeds in 2024.

Perceived Performance vs. Actual Performance

Here's something that keeps performance engineers up at night: actual performance and perceived performance are completely different things. You can have mathematically perfect 60fps, but if the animation doesn't feel right, users think it's slow. Why? Because we're not robots. We don't perceive frame rates as pure numbers. We perceive them as smoothness, responsiveness, and intention.

A micro-pause during an animation-just one or two frames of lag-can completely destroy the feeling of fluidity. A 16ms delay becomes a perceptual hiccup that ruins the entire interaction. This is why achieving consistent 120fps is harder than it sounds. It's not about the target number; it's about never dropping below it.

The Real Cost of Animation Jank

When an animation stutters or drops frames, your users notice. Studies show that even minor jank makes interactions feel unresponsive. Users assume your app is broken or poorly made. They lose trust. They churn. This isn't speculation-companies have literally lost revenue because of animation performance issues.

Netflix found that reducing load times by just 1 second increased engagement significantly. Twitter discovered that smooth infinite scroll was critical to user retention. These aren't coincidences. Performance is directly tied to user satisfaction and business outcomes.

Where Most Developers Go Wrong

• Animating the wrong properties - Animating layout properties like width/height causes reflows. Animate transform and opacity instead
• Ignoring will-change - Using will-change carelessly can actually hurt performance. Use it sparingly and with purpose
• Not testing on real devices - Developing on a powerful MacBook Pro and shipping to budget Android phones is a recipe for disaster
• Blocking the main thread - Heavy JavaScript during animations causes drops. Use requestAnimationFrame and offload work
• Over-animating - Just because you can add animation doesn't mean you should. Performance is limited; use it wisely

javascript
// ❌ BAD: Animating layout properties
setInterval(() => {
  element.style.width = Math.random() * 100 + '%';
}, 16);

// ✅ GOOD: Using transform and requestAnimationFrame
let start = Date.now();
function animate() {
  let elapsed = Date.now() - start;
  let progress = Math.min(elapsed / 1000, 1);
  element.style.transform = `scaleX(${progress})`;
  if (progress < 1) requestAnimationFrame(animate);
}
animate();

// ✅ BETTER: Using GPU-accelerated properties
element.style.transform = 'translate3d(0, 0, 0)'; // Enable hardware acceleration
element.style.backfaceVisibility = 'hidden'; // Prevent flickering

Looking Forward: 144Hz and Beyond

Gaming laptops are already shipping with 144Hz displays. Vision Pro runs at 90fps. Even consumer devices are trending toward higher refresh rates. The target will keep moving. But the principle remains: match your users' hardware. Don't optimize for the past; optimize for the present.

The Bottom Line

60fps was never the destination; it was the baseline of its time. We've moved beyond that. Your users have devices capable of 120fps, 144fps, or higher. When you ignore this, you're leaving performance on the table. More importantly, you're letting your interface feel cheaper than it is. Stop chasing 60fps. Start optimizing for the screens your users actually have.