For this year’s Google I/O, I recorded the session “What’s new in web animations”.
Appropriate animations are a great way to help users build an accurate mental model of how a web page UI works and therefore increase usability of a web site. But it’s important for a UI to feel polished and fluid to users. Shipping in Chrome is a collection of new APIs that help you build these frictionless and engaging experiences. Get a highlight of some of these new APIs: view transitions, scroll-driven animations, the linear easing function, and individual transform properties.
In the talk, I cover four topics:
- View Transitions (* written by Jake)
- Scroll-Driven Animations
- Complex easing curves thanks to
- Individual Transform Properties
You can find the video embedded at the top of this post.
Even though I managed to butcher the pronunciation of some words, I’m very happy with how the session turned out. You can hardly notice that we had to fix some things in post as the spec on Scroll-Driven Animations just kept on changing after everything had already been recorded. It was great to be in the London office to record this session, and also getting to spend time with colleagues who I typically only get to see on video calls.
Apart from my video, my team also recorded these videos:
- Una: What’s new in web UI
- Adam: How to create personalized web experiences
- Jecelyn: WebDriver BiDi: Future of browser automation
Turning to the wider Chrome DevRel team, I can also recommend Mariko’s talk What’s new in Web. Very happy to see that two things I worked on last year – namely Individual Transform Properties and the new viewport units – also got highlighted in the video.