What’s new in web animations (Google I/O 2023)

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:

  1. View Transitions (* written by Jake)
  2. Scroll-Driven Animations
  3. Complex easing curves thanks to linear()
  4. 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:

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.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.