Explore the newly stable View Transitions API in Chrome for creating impressive navigation animations in web projects without additional JavaScript overhead. Learn from Maxi Ferreira as he demonstrates how to implement seamless page transitions, apply transition names, handle key framing, ensure backwards compatibility, and create smooth card movements. Discover the magic behind this API, understand its practical applications, and compare it to traditional JavaScript implementations. Gain insights into adding meta tags, manipulating stack order, and staying updated on the API's stable release across browsers. Perfect for web developers looking to enhance user experience with elegant and efficient page transitions.
Seamless Page Navigation With the View Transitions API
Overview
Syllabus
- Welcome
- Follow up from Maxi Ferreira’s last visit
- What’s magical about the View Transitions API?
- How should we start working with View Transistions API?
- Applying a View Transition name
- How is key framing handled?
- Backwards compatibility
- Moving cards instead of fading them
- Working on seamless transitions with View Transitions API
- Adding a meta tag in the head element
- How much work would this be in JavaScript?
- Can you change the stack order?
- When does this arrive in stable?
Taught by
Learn With Jason
