Chrome 120 Stabilizes View Transitions API for Smooth Page Animations

by Ada
Last updated on May 24, 2024
Chrome 120 Stabilizes View Transitions API for Smooth Page Animations

Google Chrome 120 has shipped with the View Transitions API now stable, enabling developers to create smooth, app-like animations between page navigations and DOM updates with minimal JavaScript.

Native Page Transitions

The View Transitions API allows developers to create smooth animations when navigating between pages or updating the DOM, without the complexity of traditional animation libraries.

Key features include:

  • Automatic animation of entering and exiting elements
  • Shared element transitions across pages
  • Full control over animation timing and easing

Multi-Page App Support

While previously limited to single-page applications, Chrome 120 extends View Transitions to multi-page apps, making it possible to animate between full page loads.

Performance Benefits

Because View Transitions run on the compositor thread, they remain smooth even when the main thread is busy, providing a better user experience than JavaScript-based solutions.

Developer Tools Integration

Chrome DevTools now includes dedicated View Transitions debugging tools, allowing developers to inspect transition names, timings, and styles in real-time.

CSS Control

Developers can customize transitions entirely through CSS using the ::view-transition pseudo-elements, making it easy to match transitions to your design system.