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.
Resources:
View Transitions documentation and demos → goo.gle/io23-view-transitions
Scroll-driven animations documentation and demos → goo.gle/io23-scroll-driven-an...
Linear easing function generator → goo.gle/io23-linear-easing-fu...
Speaker: Bramus Van Damme
Watch more:
Watch all the Technical Sessions from Google I/O 2023 → goo.gle/IO23_sessions
Watch more Web Sessions → goo.gle/IO23_web
All Google I/O 2023 Sessions → goo.gle/IO23_all
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@ChromeDevs]

Want to learn more about what's new for the web? Check out the Web Keynote at #GoolgeIO → goo.gle/IO23_webkey_pin

[@paramsingh4104]

View transitions has been the most envied feature by me compared to native Android and iOS. Glad it finally landed, although late.

[@genaroibc]

This is amazing Bramus ❤

[@mathnewph]

Can't wait to be able to use thoses transition in vue !

After years of enjoying your blog, I finally know how to pronounce your name :)) thx for a great summary 🙏

[@bramus]

Thank you, Pavel.

[@akshar_dave]

Thank you all for this! 🥭

[@ericnjanga3245]

This is amazing!!! ❤❤❤

[@komakaze1]

All of these look interesting, but i'm particularly looking forward to the scroll and animation related features that could benefit parallax scrolling web animations.

[@guanbo-yang]

These features are game-changing😮😮

[@bramus]

Yes, it’s a very exciting time to be a front end developer 🤩

[@TesterAnimal1]

I can’t see how. As a front end developer concerned with real world user needs, this is all fancy swooshy things and fiddling round the edges.

[@metamorph8976]

@@TesterAnimal1 It's as much JS that won't be written nor loaded by the client, and it will also allow people who disable JS to view those "swooshy things and fiddling round the edges".

[@savire.ergheiz]

So not before long we will have css files which is way bigger than JS. Good Job 😂

[@amoose136]

I honestly want the frameworks to take the easing function as defined in JS and then just bake it to CSS linear on build automatically so less JS is shipped but the developer experience is more flexible and you can still think in terms of functions and not a series of stops.

[@kirillsundaen8810]

It's amazing!

[@dzienisz]

10:16 nice explanation

[@starlederer]

14:08 this is very cool but are there plans to introduce logical directions for transforms (e.g. `translate-inline` `translate-block`)

[@bramus]

This is still being discussed within the CSS Working Group. Thanks for signalling interest, I’ll pass on the message :)

[@alfathmuqoddas6986]

this feature will significantly reduce javascript library used to handle animation! reduced js means increased lighthouse rating!

[@mohammadaminrajabi1828]

That's crazy.

[@jobiej7416]

It’s great. But these features will be best in a pwa published to the play store because of safari

[@giorgiog2822]

This is amazing! Feel like i wasted so much time animating in JS haha I'm wondering if is there a way to communicate between JS and Css with this animations, i picture a case where when you end a transition you wanna trigger a function or dynamically create a new element. Last is there any thought about the control of how smooth is the page scrolling in css? (like inertia in some js libraries)

[@bramus]

In your JS you can listen to animation/transition end events to trigger other things.

[@silberguy]

Is there an expected time that the features will be available for Firefox and safari?

[@philip9677]

what if the animate to page hasnt loaded yet

[@bramus]

There's a timeout. In case that is reached, the transition is skipped.

[@cloudpuncher4615]

what happened to animation worklet API? being able to run an animation in another thread would be pretty handy...

[@bramus]

That API is currently not being worked on. Do note though, that Scroll-Driven Animations run off the main thread where possible.

[@andrewskangah3710]

All of these look great and all. But, Microsoft Edge is proving more efficient than Chrome these days, and I really want Chrome to fix its performance issues to remain in the game. Anybody agree with this? I love Google btw.

[@Atractiondj]

When will Google buy apple and delete safari from the web?

[@jakearchibald]

First!

[@yapet]

Just as I was thinking “where is Jake?”. Here he is, in the comments

[@bramus]

👋

[@leularia]

do we have pollyfill or something like i don't like the web because you can't use things

[@bramus]

For many of the features you don’t need a polyfill when you approach them as a progressive enhancement while providing basic fallbacks to older browsers. For Scroll-driven animations specifically there once was a polyfill in the works, but it’s currently on hold while our engineering team first works on finalising the Blink implementation.

[@rinconfede]

"I have a question about accessibility... is there any way to disable the "view transition API" or "scroll-driven animation" in the browser? I mean, what if people need to turn this off for any reason? (think of Epilepsy, migraines, etc., or even if the user doesn't want it, similar to cookies, for example)."

[@clevermissfox]

Yes usually developers put animations behind a function that checks whether the user has “prefers-reduced-motion” turned on in their browser. If the user has enabled this, the animations aren’t triggered.

[@RR-bz8bi]

the "back button" isn't a true "back button"

[@axios7776]

Better late than never

[@realalphas]

How to use this with qwik?

[@shawnbrian5805]

Wrap your function which control page navigation in document.startViewTransition(); Then, you will get a fade through transition.

[@realalphas]

@@shawnbrian5805 Two month past, it is implemented in qwik. And still your solution will not work, because when you clicking a link it's function will not provide Promise. = )

[@dzienisz]

As always Safari webkit is lagging :( it's sad, Apple have so much money and resources to be on the same page as Google.

[@bren.r]

They don’t innovate anymore. They don’t care about quality. They only know how to market well. They’re toast.

[@theklr]

I mean where’s subgrid though. Safari has been catching up in recent years, but they don’t follow only google’s direction. Go look for these in drafts and see the discussions.

[@kklowd]

He's cute

[@bramus]

Cute wasn’t really what I was going for, but I’ll take the compliment nonetheless.

[@nullstress]

@@bramus I think you're cool