Transitions API for Chrome to Animate the Web

Google is looking to create an enhanced user experience via a Navigation Transitions API that provides seamless transitions in browsers and apps. The above video from Google's Chrome Dev Summit provides a sneak peak.

Android 5.0 Lollipop is gorgeous to look at. This is due in part to Material Design, the new design language created by Google to give Android 5.0 its visual appeal. Material Design uses animated transitions to flow from one task or app to another, and the result is a seamless user experience. Sadly, surfing the Web from your browser doesn't offer this same rich experience — but it might thanks to a new API from Google. 

Google recently showed off the Navigation Transitions API for Chrome, which is meant to bring the appealing transitions of Material Design to the browser. As we experience the Web today, page refreshes or site changes often call up a blank white page that is then populated with content. The experience can be jarring, and the flashing white screen reminds us that we're using the Web and not a native app. 

Google explained during a recent developer summit that people have a poor grasp of timing on the Web. They know when things are fast and when things are slow, but that's about it. Google showed people an example of two transitions: one that uses the traditional way to refresh Web pages and one that uses the Navigation Transition API for Chrome to refresh the page. The time it took the website to refresh was identical for both transitions, but people always said the latter of the two was faster. Improving the apparent speed of the Web let to more satisfaction among users. 

The API works by giving Web pages more animations to use when refreshing content. It includes a meta tag, link header and the developer's choice of animation. Google said legacy browsers that can't or don't support the Navigation Transitions API will continue to load pages as they always have. 

Perhaps even more interesting is how the API works between Chrome and regular apps. Google provided another demonstration that showed Chrome transitioning seamlessly to a native app on the handset. It didn't feel like the phone was transitioning between apps at all; instead, it looked and felt like the browser was just morphing into the separate app. (You can see the demos here.)

Google said the API is still in prototype state and will likely change over time. Even so, it's neat to get a sneak peek at what the Web of the future might look like.

Be sure to read the next Browsers article: Mozilla Firefox Adds Browser Based Virtual Reality Feature