Bringing page transitions to the web

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=JCJUPJ_zDQ4


Duration: 12:57
219,192 views
11,883

Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good news: new APIs are coming to simplify this process, building on top of CSS animations and the web animation API, and it works across navigations!

Resources:
Demo → https://goo.gle/3M55GV8 (requires document-transition and enable-experimental-web-platform-features flags)
Developer guide → https://goo.gle/38hsYIU
Full explainer → https://goo.gle/3yrbzrS
Codelab → https://goo.gle/39cXoMw

Speaker: Jake Archibald

Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GoogleIO



Other Videos By Chrome for Developers


2022-05-12DevTools: State of the Union 2022
2022-05-12A deep dive into optimizing LCP
2022-05-12Learn how browsers are working together to make it easier to build for the web
2022-05-12Open web standards with Privacy Sandbox
2022-05-12Best practices for developing classroom tools with Chrome OS
2022-05-12Gaming with Chrome OS
2022-05-12Debugging accessibility with Chrome DevTools
2022-05-12Core Web Vitals in the real world
2022-05-12State of Angular
2022-05-12How to take full advantage of a PWA install
2022-05-12Bringing page transitions to the web
2022-05-12A path to a world without passwords
2022-05-12How to speed up Largest Contentful Paint (LCP) with cross-site prefetching
2022-05-11Introduction to Angular
2022-05-11What's new in Chrome OS I/O 2022
2022-05-11Measure performance with web-vitals.js, Google Analytics, and BigQuery
2022-05-11Creating instant and seamless web apps with Chrome
2022-05-11What's new for the web platform
2022-05-11Build more accessible apps in Angular
2022-05-10Performance insights panel | DevTools Tips
2022-05-03Is .css a bad idea? Is inlining the way forward? | HTTP 203


Tags:
web design
web development
in-page transitions
CSS animations
web animation API
cross-navigation
web developers
Google I/O
Google IO
I/O
IO
Google I/O 2022
IO 2022