It dissects the whole thing and allows us to break down the animation in the different elements discussed above. The Chrome animation tab inside the inspector is the perfect tool to examine the animation. Here’s what the whole thing looks like in CSS. You don’t want your transitions to be too long. It’s a value that makes the transition quick and snappy. A good value for the animation duration is 300 milliseconds. With the transform rule, we can manipulate the element’s scale value. You can find the Material Design CSS easing values in the documentation under Motion → Speed → Easing. With the right kind of easing, your transform transitions will look a lot better. We’re using the Material Design ease-in-out easing to get the exact right punch to the effect. A scale transition with an opacity transition in the middleįirst of all, let’s look at the transition that scales up both the containers.All you need are the three following things to create the most basic version of the effect: You don’t need all the specifics to make it look good. Or, at least, a simplified version, which still gives you enough value for your efforts. Yet, you can quite easily create the expand and x-fade animation yourself. One is easily discouraged by all the details and intricate examples in the documentation. It might feel daunting and especially when looking through the documentation to create the effect yourself. Play a song or send an email are two examples of actions that we see in the examples above. Note how the expanded state gives the user more options to explore the expanded state further. Here you find the effect, e.g., under the container transform and under exists and closing sections.Įxample of the Expand and X-fade effect from the Material Design documentation Most notably, it appears in the motion chapter. However, it appears in several places and demos in the documentation. It has not a section nor a name of its own. The Material Design documentation only implicitly outlines the effect. Examples of the Expand and Cross-fade effect There has to be some form of information hierarchy on a web page. It doesn’t make sense to show all information all at once to all users. A landing page, for instance, should cater to a wide range of users. Sometimes, you want your users to have the opportunity to bring forward specific elements to the foreground. This effect is an example of how you can allow your users to deep-dive into certain parts of your web page. The point is for the user not to lose their context. Some parts are the same or merely enhanced. The expanded state, on the other hand, will very much resemble the collapsed version. The collapsed state will contain just enough condensed information and visual cues to inform the user that there’s more to explore. Whenever a user initiates the effect, the element scales up and cross-fades from a more elementary form to a more detailed, zoomed-in version. Photo by Didssph on Unsplash - Illustration of expansion Think of it as an advanced expand/collapse effect. That could be a FAB (floating action button), an image, a more complex element, e.g., a container with several combined HTML elements, and so on. The technique allows users to expand certain parts of the page. This effect is not unique to Material Design, but it truly shines in Google’s design system. I call it, for lack of a better name, the Material Design Expand and Cross-fade effect. There is, though, one detail that I think is worth highlighting a bit extra. Material Design comes with a lot of great visual guidelines. These types of interfaces should above all be functional. One example where it comes to good use is in your typical dashboards and admin UIs. However, it’s a good option for the cases where you want to prioritize utility over looks. Sometimes you want your UI to stand out from the crowd. It might not be the design system for every occasion. Not only does it please users visually, but it also gives you a lot of sound UX and accessibility straight out of the box. It’s beautiful, and it brings unity to a lot of user interfaces. Material Design is and has been getting a lot of attention, and rightfully so. The simplified Material Design Expand and Cross-fade effect.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |