4/30/2023 0 Comments Google web designer animations![]() The cross-fade is a series of overlapping opacity fade-ins and fade-outs. So what can we do to make this run smoothly? We can use sleight of hand! Instead of animating the actual blur value (the radius of the blur), we pre-compute a couple of blurred copies where the blur value increases exponentially, then cross-fade between them using opacity. The bigger the image or the bigger the blur radius, the more costly the effect is.Īnd that's where the problem lies, we are running a rather expensive GPU operation every frame, blowing our frame budget of 16ms and therefore ending up well below 60fps. Convolution filters are fairly expensive as for every output pixel a number of input pixels have to be considered. Whenever an element is both promoted and blurred, the blur is applied by the GPU using a shader.īoth SVG filters and CSS filters use convolution filters to apply a blur. ![]() And that's technically correct as a "repaint" refers to the CPU having to repaint the texture of a promoted element. If you enable "Paint Flashing" in DevTools, you won’t see any flashes at all. So let's try to find the bottleneck by looking at DevTools. The good news is that our workaround for animating a blur works with both techniques. Unfortunately, if you are required to support Internet Explorer, you have no choice but to use SVG filters as IE 10 and 11 support those but not CSS filters. Thanks to increased support and ease of use, CSS filters are typically used. To blur elements on the web, there are two techniques: The CSS filter property and SVG filters. To get started, let's first understand why the animated blur is slow. We can, however, find a work-around that looks good enough, but is, technically speaking, not an animated blur. # The problemĪs of now, we can't make animating a blur work efficiently. Desktop machines tend to have deceptively powerful GPUs. Can we do better?Īlways test your web apps on mobile devices. Animating a blur - transitioning from unblurred to blurred - seems like a reasonable choice, but if you've ever tried doing this on the web, you probably found that the animations are anything but smooth, as this demo shows if you don't have a powerful machine. ![]() However, this technique can be quite jarring when applied without any transitional period. My colleague Yi Gu wrote a library to take care of everything for you! Take a look at our demo. Instead, pre-compute a series of increasingly blurred versions and cross-fade between them. # TL DRĪnimating a blur is not really an option as it is very slow. ![]() During that time, the remaining choices could be blurred to redirect the user to the newly displayed information. One example would be a list of icons that display details about the individual items when hovered over. Users ignore the blurred content and instead focus on the content they can read. Making some visual elements appear blurred while keeping other elements in focus naturally directs the user's focus. Blurring is a great way to redirect a user's focus. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |