The View Transition API, a Revolution for the Web?
You would like to add animations to your web front-end application in order to offer a better experience to your users but you are put off by the difficulty ? You are the king of CSS transitions, keyframes and FLIP animations, but you are sick of handling UI and accessibility issues created by these techniques ? You develop a more traditional multi-page full-stack website (rails, express, laravel...) and you would like to improve the feel of the navigation between pages ?
To solve all these issues and more, discover with me the View Transition API. Thanks to it, you can delegate to the browser most of the animation work. Performing transitions between different states of your UI becomes a piece of cake, even between separate HTML documents! (🤯)
On the menu, I'll showcase how this new API works under the hood and what are the best practices to use it in all contexts. We'll see together that this API removes limitations hitherto never overcome in web development!
Fun Fact: at 7:12, my computer force reboots even though I have just refused an OS update, I had to perform most of the talk on a computer borrowed from a member of the audience (many thanks to him!).
Useful links
- Demo applications: SPA/MPA
- GitHub repositories: SPA/MPA
- Chrome for developers - Same-document view transitions for single-page applications
- MDN - View Transition API
- Jake Archibald - View transitions: Handling aspect ratio changes
- Matt Perry - Revealed: React’s experimental animations API
- Bramus - Articles sur l’API view transitions