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:

Speaker: Bramus Van Damme

Watch more:

#GoogleIO

[paramsingh]

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

[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 🙏

[komakaze]

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.

[starlederer]

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

[amoose]

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.

[savire.ergheiz]

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

[alfathmuqoddas]

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

[Atractiondj]

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

[RR-bzbi]

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

[jobiej]

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

[silberguy]

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

[thejedionyoutube]

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.

[giorgiog]

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)

[philip]

what if the animate to page hasnt loaded yet

[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)."

[cloudpuncher]

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

[leularia]

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

[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.