Animate between states with the View Transitions API
By Bramus Van Damme
Transcript
Hi, my name is Bramus, Chrome Developer Relations Engineer at Google and member of the CSS Working Group.
I am going to give you an update on the View Transition API, an API that allows authors to create rich transitions between two page states.
So, fair warning: this presentation has animations in it.
To show what this API can do, let’s take a Single Page Application that doesn’t use View Transitions yet.
When clicking on a thumbnail, the user goes from the overview state to the detail state.
Using the back button, they can go back to the overview.
Now, this change in state happens abruptly, and the layout jumps around.
By adding View Transitions, authors can add a transition in between these states.
Check out this updated version.
As a user goes from the overview state to the detail state, the interface smoothly transitions between the two: the header bar moves away, the enclosing box grows, the avatar moves position, etc.
Same thing happens when pressing the back button in the app: the elements smoothly animate back to their original position.
So, what does it take to add a View Transition?
Well, not that much, really.
Authors can take their existing code that updates the DOM and wrap it in a call to document.startViewTransition(), while also providing a fallback for browsers that don’t support it.
And with that piece of code in place, the change between states goes from this immediately changing version to this version that fades between the two states.
To do this transition, the User Agent has automatically captured the root element and taken two snapshots of it: an old snapshot before the change, and a new snapshot after the change.
This all happened behind the scenes.
Now, the browser did this capture because of the `view-transition-name` CSS property that is declared on the root in the User Agent stylesheet: this declaration instructs the browser to take the snapshots when doing a View Transition.
Once the browser has captured these two snapshots, it stacks them on top of each other and automatically transitions between them using a fade animation.
This animation is done using a tree of pseudo elements, but I won’t go into details here.
Now, authors can also use this `view-transition-name` CSS property themselves.
Adding this to more elements makes the browser capture more individual layers to be used in the transition.
Here’s an example where the blue box has been given its own `view-transition-name`.
Because of this, the browser captures it independently of the root element, and also transitions it in a standalone manner.
To customize these transitions, authors can override the default animations and apply their own instead.
In this demo for example, the piece of text in the lightbox slide in and out of view.
Authors can do this customization from within CSS, by selecting some of the pseudos using a regular CSS selectors and declaring different CSS animations on them.
View Transitions are implemented in Google Chrome as of Chrome version 111.
Other browser vendors have expressed positive positions on it.
Authors are already very excited about seeing this feature come to browsers, with a lot of articles being written and many demos being made.
No surprise there to be honest, as the things you can do with it are simply amazing.
At the time of recording this, Level 1 of the specification is currently transitioning to Candidate Recommendation.
So maybe by the time that you get to watch this video, that will already be the case.
Together with the CSS Working Group, our team of engineers at Google is currently working on level 2 of the specification.
This will allow cross-document View Transitions, element-based View transitions, amongst many other features.
So maybe next year, we’ll have another update to share.
See you then.
