The Web Can Do What!?

with Google

The Web Can Do What!?


The Web Can Do What!?

Showcase the incredible capabilities of the modern web by the Chrome for Developers team. As passionate web enthusiasts, our goal is to inspire creators to build better, more engaging, and innovative web experiences.

At the heart of this project is a commitment to openness, collaboration, and continuous improvement. We invite you to explore our site, learn from our examples, and join us in shaping the future of the web. Together, we can create a more accessible, efficient, and delightful online world for everyone.
The web can

Deliver app-like navigations


It’s now significantly easier for web apps to deliver the same rich transitions between two UI states that users are used to on native apps.

The opportunity

Enhance engagement with an app-like user experience

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 API

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.

Seamless navigation on Miravia’s web app using the View Transitions API

Scroll-driven Animations

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!

Use Cases

CyberAgent implements transitions to create signature brand experience

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.

“View Transitions is one of my favorite APIs. The ability to add animations as a standard browser feature makes view transitions easier to implement and maintain compared to other solutions dependent on libraries. We are looking forward to implementing view transitions to more services to communicate our brand.”

— Kazunari Hara, CTO of Ameba, CyberAgent client. Source

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.

Getting started

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.

Was this content helpful?