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.
@@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".
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.
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)
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.
"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)."
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.
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.
@@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. = )
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.
Want to learn more about what's new for the web? Check out the Web Keynote at #GoolgeIO → goo.gle/IO23_webkey_pin
View transitions has been the most envied feature by me compared to native Android and iOS. Glad it finally landed, although late.
This is amazing Bramus ❤
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 🙏
Thank you, Pavel.
This is amazing!!! ❤❤❤
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.
These features are game-changing😮😮
Yes, it’s a very exciting time to be a front end developer 🤩
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.
@@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".
14:08 this is very cool but are there plans to introduce logical directions for transforms (e.g. `translate-inline` `translate-block`)
This is still being discussed within the CSS Working Group. Thanks for signalling interest, I’ll pass on the message :)
10:16 nice explanation
Thank you all for this! 🥭
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.
It's amazing!
When will Google buy apple and delete safari from the web?
Is there an expected time that the features will be available for Firefox and safari?
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)
In your JS you can listen to animation/transition end events to trigger other things.
this feature will significantly reduce javascript library used to handle animation! reduced js means increased lighthouse rating!
So not before long we will have css files which is way bigger than JS. Good Job 😂
what happened to animation worklet API? being able to run an animation in another thread would be pretty handy...
That API is currently not being worked on. Do note though, that Scroll-Driven Animations run off the main thread where possible.
what if the animate to page hasnt loaded yet
There's a timeout. In case that is reached, the transition is skipped.
It’s great. But these features will be best in a pwa published to the play store because of safari
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.
"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)."
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.
the "back button" isn't a true "back button"
do we have pollyfill or something like i don't like the web because you can't use things
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.
That's crazy.
First!
Just as I was thinking “where is Jake?”. Here he is, in the comments
👋
How to use this with qwik?
Wrap your function which control page navigation in document.startViewTransition();
Then, you will get a fade through transition.
@@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. = )
As always Safari webkit is lagging :( it's sad, Apple have so much money and resources to be on the same page as Google.
They don’t innovate anymore. They don’t care about quality. They only know how to market well. They’re toast.
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.
Better late than never
He's cute
Cute wasn’t really what I was going for, but I’ll take the compliment nonetheless.
@@bramus I think you're cool