Navigation between different screens is a core part of the user experience. App developers frequently use common UI patterns to create smooth, rich transitions between the various app views. This reduces users’ cognitive load and delivers an experience that feels intuitive and modern. And these patterns are now getting much easier to implement.

View transitions are a common pattern used to not only make page transitions look great, but to also communicate the direction of flow. For developers, this design choice previously required significant effort and the use of large amounts of CSS and JavaScript, leading to quite a bit of jank.

The View Transitions API provides a simpler and more seamless way to animate transition between two states.

Another popular UX feature is scroll-driven animations, delivering an uninterrupted user experience as they move through the information. From doing subtle animations like headers moving in and out or images shrinking up and down, to bigger parallax effects. Thanks to the new the Scroll-driven Animations specification, developers now have new APIs and concepts needed to build performant scroll-driven animations in the browser.

By building the new API in conjunction with the Web Animations API (WAAPI) and CSS Animations API, developers can use all the advantages that come with the existing APIs and run it off the main thread, all with just a few lines of code!

The Japan-based IT company CyberAgent provides many online services, including platforms for publishing blogs and news. In the past, CyberAgent considered using CSS animations or an animation framework to implement engaging, animated transitions that would improve user experience. However, they had concerns around slow rendering performance when manipulating the DOM, as well as code maintenance challenges.

When Chrome finally added support for the View Transitions API, CyberAgent was eager to leverage this new tool. They saw it as an opportunity to create smooth, optimized page transitions while overcoming their prior restraints related to DOM rendering and code upkeep. View Transitions offered a performant approach to animate navigation that fit with CyberAgent's goal of enhancing user experience across their diverse web services.

CyberAgent tested the new View Transitions API for Multiple Page Apps on a service called Ameba News, which is a news portal site. Kazunari Hara, the Tech Lead of the Ameba service in CyberAgent, said that the view transitions could have significant impact on the business’s ability to create an ownable brand experience and to save costs when creating and applying this brand property across touch points.

View Transitions and Scroll-driven Animations are now available in Chrome and Edge and both Mozilla and Apple have shown positive signals to support these APIs in the near future.

For View Transitions, developers can implement the API today as a progressive enhancement and for Scroll-driven Animations, there’s also a polyfill in the works.