How We Designed & Built a View Transition Demo

By admin
The new

View Transitions API
PRODUCT

is one of the most exciting updates for the web in

years
DATE

and is beginning to land in stable browsers. It introduces the ability to do smooth page transitions on the web – similar to a mobile app experience – in a simple and approachable manner. Until now, frontend developers would need to look towards complex

JavaScript
PRODUCT

libraries like

Barba
PERSON

JS to be able to mimic these types of transitions. Now, we can move much of the labor to the browser and control it nearly entirely from within CSS. In my mind, view transitions are truly going to be revolutionary for design and development, and will become a common trend found on all different types of pages across the web.

At the moment, there is no better framework for playing with view transitions than

Astro
PERSON

(

v3.0
CARDINAL

and later), the

first
ORDINAL

major web framework to support the new

View Transition
ORG

API natively.

Astro
PERSON

’s approach to the View Transitions API is to provide sensible default features for users to leverage, while maintaining accessibility and fallback support at the forefront.

One
CARDINAL

particularly distinctive feature is its support for persistence, which showcases

one
CARDINAL

of the most captivating effects that can be achieved with view transitions.

The Objective #

Our goal was to create a demo that would highlight the benefits of view transitions and showcase the most exciting features, such as persistence. We wanted to experience true designer and developer collaboration on this project, so Senior Designer

Andew Greeson
PERSON

and I paired up from the very beginning to conceptualize and execute on a demo.

We started by looking through various examples of view transitions across the web and identifying particular interactions that really emphasized the effect. While transitioning a single scene with something like a picture was neat, it was the culmination of multiple elements moving around the page that really got us excited.

Maxi Ferreira’s
PERSON

View Transition demo in particular really struck a chord with us because of how complex it looked. We knew that something along those lines would be a great place to start, so I sought to re-create this demo with

Astro
ORG

‘s newly introduced view transition API and see how close I could get it.