What's new in web animations

Key Takeaways

foreign it is important for a user interface to feel polished and fluid a great way to help with that are appropriate animations they help users build an accurate mental model of how the interface Works thereby increasing the overall usability shipping in Chrome is a collection of new web apis that you achieve exactly that my name is bravis and let's take a look at what's new in web animations at last year's IO Jake Archibald talked about page transitions an API that makes it easy to change the Dom on a single step while creating an animated transition in between the two states back then it was just an experiment behind the feature flag in Chrome Canary but now thanks to your feedback that experiment was developed into a full feature within the CSS working group it's now called view Transitions and single page application support shipped in Chrome on the left to use view transitions take your code that updates It On by whatever method and wrap it in the view transition API with a fallback for browsers that don't support the feature and just like that you get a Crossfade between the two states this animation happens in the tree of pseudo elements meaning you can customize it with CSS the small chunk of code like this changes the default to a fade and slide you can use code like this which gives you this popular sci-fi wipe effect don't worry about reading all the code now I just want to show you it's a small chunk of code if you want to take a closer look all of the demos are linked in the description you can even create some truly silly effects like 3D spins or slams or whatever you want in all of these examples the whole page is transitioning together but you can also transition parts of the page independently you can do this by giving an element if you transition name now it's captured separately from the rest of the page meaning you can animate it independently take this example where thumbnails zoom into the full image and the header stays fixed in place this is all possible today in Chrome and you can use it as a progressive enhancement so it doesn't disrupt other browsers we have a full Guide to the feature if you want to get started including how to use these view transitions alongside Frameworks like react view svelte and lit we've already seen a number of companies using view transitions to enhance our sites today some have already shipped and some are still in development one implementation I really like is this wonderful demo by Maxi Ferreira leveraging view transitions this demo app is enriched with tasteful and supporting transitions between the two types of views what I love about this demo is that it shows you that interactive elements like the video keep playing while the view transition is happening and this real demo from Airbnb which shows the kind of Rich transitions that you can create between states even though the state is changing synchronously in the background but that's not the end of the story for view transitions there are more extra features and enhancements we want to add for example check out this demo it doesn't look much different to some of the demos from earlier but this page has no JavaScript a total lack of JavaScript zero bytes on the JavaScript scale this is because it isn't an Spa it's just plain old links between multiple pages but with view transitions in between them this demo works today in Chrome Canary with the View Transitional navigation feature flag set to enable it works pretty much the same as the spa API but rather than using script to tell the browser about the Dom change the browser can do that itself with a page change because it's already in charge of navigations it already knows when it's switching from one page to another the CSS to customize the transition is the same as the same set of pseudo elements it even works well with other navigation enhancing features like pre-render which reduces the time between a user clicking a link and the transition starting we have work to do before this gets too stable particularly when it comes to how two pages opt into your view transition but we're actively working on it let's rewind a bit and go back to the world of spa transitions right now only one view transition can happen at a time and that's a bit of a problem if you try and start a new transition while one is already running the old one skips to the end so the new one can start but what if instead of document.start view transition you could do element.startview Transition that way two components such as the video player or chat widget could perform view transitions scope to their element and run independently this is an idea we're exploring and we're calling it scoped transitions one more feature we're exploring right now you can create view transition where the page header animates independently from the rest of the page this works great when a header is in the same position on both pages that isn't always the case sometimes one of the pages we have scrolled potentially thousands of pixels that means by default the header will animate from thousands of pixels away so most of its animation will be out of view that generates what you want in terms of visual effects to solve this we're exploring IDs around some kind of opt-in as you say here's my header it should animate independently in the view transition but if it isn't a viewport just pretend it isn't there and that's just a few of our thoughts see the description for a link to more future IDs and let us know which one you're most excited about in the comments [Music] next up is scroll Riven animations a very exciting addition that allows you to control the playhead of an animation by the scroll position of a scroll container this means that as you scroll up or down an animation will scrub forward or backward take this progress bar to the top of the page for example as I scroll up and down through the page the progress bar also gets adjusted now the cool part about this is that this demo is powered by nothing but HTML and CSS and even more exciting the animation itself runs on the compositor yeah you heard it right now the single line of JavaScript was used to build this and it's not blocking the main thread in any way this doesn't mean you can't use JavaScript at all for this on the contrary if you want you can that's because this new API also comes with a set of JavaScript classes that integrate nicely with the web animations API for this talk however I'm focusing on the CSS approach so back to the example the let's look at some code to grow the progress bar I have a set of keyframes that scale it up on the x-axis these keyframes are attached to the progress bar using the animation property nothing new there however instead of letting the animation run on page load I attach it to scroll progress timeline using the animation timeline property its value is set to scroll block root which tells the browser to track the scroll progress of the root scroller the document scroller on the Block axis and map its progress to the animation progress furthermore because seconds no longer have any meaning here I set the animation duration to Alto and with just that little piece of code you get the result I've already shown you scroll down the page the animation progresses that's pretty neat right the scroller to track doesn't need to be the roost crawler by the way it can be any scroller on the page to Target a different scroller change the scroller argument that gets passed into the scroll function accepted values are self to track the Box's own scroll progress nearest to track the progress of the nearest parent element that is also a scroller or root which I've already shown the default value is nearest to change which access to track alter the axis argument to the function accepted values are horizontal and vertical or The Logical inline and block keywords the default being block as both a scroller and axis arguments have a default value you can opt to only declare one or simply omit both of them in this slide both code examples are equivalent as they both Target the same default values with the scroll function I've just shown you you create an anonymous scroll timeline to refer to a specific scroller one that's not the nearest scrolling parent or the route you can create a named scroll timeline for this use a scroll timeline name property and set its value to an identifier of your choice optionally you can also set the scroll timeline access to Define which axis you track on the element that needs to animate you then use that scroll timeline name as a value for the animation timeline property one side note using name progress timelines in CSS is that the scroller currently must be apparent element of the animated element we're looking into ways to relax this restriction but for now you'll just have to keep it in mind if you're already excited about this great if not maybe the second part this feature offers can lure you in because with scroll driven animation you can also drive an animation based on the position of an element within its scroll container this is somewhat similar to how intersection Observer Works here's an example where the images fade in as they enter the scroll port and again this is all on using just CSS it's a regular faded animation but it's attached to a view progress timeline that tracks the image within its crore to create a view progress timeline set the animation timeline property to view by default an animation linked to the view progress timeline attaches to the entire range of it this range starts from the moment the subject enters the scroll port and enter the subject has left the scroll port using the animation range property it is possible to bind the animation to a specific part of view progress timeline here it is set to entry which tells the browser to run the animation from start to finish while the element is entering the scroll port you can start and end an animation in different ranges or different positions within those ranges in addition to the entry range other allowed values are exit cover and contain there's also entry Crossing and exit Crossing the tool shown on screen and Linked In description below can help you understand what each range means and how the specified percentages affect the start and end position a different approach but one that gives you more flexibility is to adjust the keyframes themselves without specifying an animation range as you can see in this snippet the range information is included in the keyframes themselves that way you can link up one set of keyframes that control the animation effects of several ranges here's a demo that uses the keyframes that were just shown on screen the entries in the list animate in at the bottom during the entry phase and at the top they animate out during the exit phase how cool is that so that was scroll driven animations I'm very excited about it there's a ton of things that you can do with it such as creating Paradox background effects sections that move horizontally as you scroll down or even this album visualization that you can flick through and yes that demo 2 is powered by nothing but HTML and CSS now the single line of JavaScript is to be seen inside if you want to learn more about it visit developer.chrome.com for an in-depth article which includes all of the demos I've just shown you in addition to the CSS approach the article also covers the JavaScript approach you can find the link in the description below along with a link to a codelab to try it out yourself [Music] on to the next part compared to the previous two features I just talked about the next one might be pretty small in comparison nonetheless it's one that will come in handy if you want to precisely control the easing curves of your animations I'm talking about the linear easing function and it's available in Chrome 113 and Firefox 112. now don't let the name of the function fool you because with it you can create complex easing functions in a very simple manner with the compromise of losing some precision let's take this bounce easing for example blue box is animated using it it's really nice and smooth unfortunately creating such an easing function is currently not possible in CSS but here's the good news what if you didn't need to what if you could fake it well that's where the linear easing function comes into play it allows you to reduce the complex curve to a more simplified version so let's take the original curve in blue and simplify it by adding some points or stops onto it here each Green Dot indicates a stop then and this is where the linear function gets its name from the interpolation between each top is done in a linear way the result is a curve that kind of looks like the original but it's a bit rougher on the edges compare the green animated box to the blue one you can tell it's not as smooth but if you had enough stops you can approximate the original curve quite well here's an updated version by merely doubling the number of stops you already get a smooth result the code looks like this a function name linear that you can set as a value for the animation timing function property the function accepts a list of stops and a stop can be a single number that ranges from zero to one by default these stops are spread equidistantly but for more finer control you can specify this top length as a percentage to easily create these simplified curves my colleagues Jake and Adam have built a tool to help you with this the tool takes the JavaScript easing function or SVG curve as its input and out comes a simplified curve which uses linear pretty cool right now we're finally able to have effects that bounce or have elastic easings all from within CSS [Music] last but not least let's look into individual transform properties a feature that landed in Chrome 104 and that is available in all three main rendering engines with individual transform properties you can more easily manipulate parts of a transform or animation take this example where Target element scale changes from 1.2 to 2 on Hover because of how transforms work you now need to duplicate all individual transform functions for the property and also make sure that you list them in the same order not that developer friendly to be honest with individual transform properties this is now solved as you have Standalone properties for that I'm talking about translate rotate and scale here's the revised code in the hover State we only change the value for the scale property without needing to repeat the others that's easier right oh and this also works for animations look at this timeline of what I want to achieve even though the rotation in the example goes from 0 to 360 degrees over time I need to calculate a rotation for every keyframe where the scale transform also changes something here's the resulting keyframes for retirement using the transform property for the animation to run as I want I need to add rotate transform function to every keyframe this is quite tedious especially with multiple transforms at various points in time leveraging individual transform properties the updated code now looks like this I think this is much easier to read as it more clearly expresses the intent behind it going further this also allows you to easily split up the keyframes per function and apply each set of keyframes individually to the elements this way you can more easily change the easing or duration per aspect that you want to animate before we close there's an important note I have to mention with this the order in which these new properties are applied is fixed with a regular transform the transformation functions get applied in the order they are written in that is from left to right with individual transform properties this is not the case the order is always the same first translate then rotate and then scale that means both of these code Snippets here give the same result oh and finally if you mix these with a transform property as a Transformer gets applied lost so let's translate rotate scale and then transform and with that we're already at the end of this session I'm very excited to see all these new features available in Chrome as they help you build frictionless and engaging experiences even more features along the way so be sure to keep an eye on developer.chrome.com for updates a huge thank you goes out to our engineering teams who not only Implement these features in the rendering engine but also shape and Define the specifications and apis in collaboration with the standards bodies while also incorporating feedback as their well gather from you so what are you building leave a comment below or drop us a link on social media bye [Music] foreign [Music]