![]() Note: Shared Element Transitions API is currently supported only in Chrome version 104+ and Canary with the document-transition flag enabled. I’ll also showcase some awesome React, Astro, and Svelte implementation examples from the dev community. In this article, we’re going to showcase same-document page transitions commonly found in Single Page Applications and talk about the future of the Shared Element Transitions API for cross-document (Multi Page Application) transitions. In the first part of this article, we covered Shared Element Transitions API (SET API) and how we can use it to effortlessly create complex transitions for various UI elements, which would usually require a lot of JavaScript code or an animation library to achieve.īut what about smooth and delightful transition animations between individual pages? This is probably one of the most often requested features in the past few years because even with all the frameworks like React and Svelte and animation libraries like GSAP and Framer Motion, transitions between pages are still really difficult to do. Instead of the radical solution presented above, we should act on a case-by-case basis.In this article, Adrian Bece will show how to create same-document page transitions for Single Page Apps using Shared Element Transitions API and check out its future implementation and potential for creating cross-document transitions in Multi-Page Apps. On the other hand, a pulsing icon trying to notify the user of a new feature that they might not be interested in seems to be an animation that could or should be removed. When the user clicks a submit button but the form cannot be submitted because one field is not filled, it may be a good idea to draw attention to that field by, say, animating a box shadow. It is totally fine to keep some animations, especially when induced by a user action. ![]() For each animation we can ask ourselves (or even better: our users) whether it adds to the user experience or is just a fancy but unnecessary effect. The media query is called prefers-reduced-motion, not prefers-no-motion nor does-absolutely-not-want-any-motion. Removing them entirely may not be a good idea. Removing animations or reducing animations?Īs said before, animations can improve the user experience. The Mozilla Developer Network has a list of how to activate this setting on various operating systems. In general, this is not a browser setting but a setting that you can activate on your device. Therefore, we do not want to remove animations in general but only for those users that prefer reduced motion.Īnd we can do exactly that with a media query called prefers-reduced-motion: (prefers-reduced-motion: reduce) How to activate the reduced motion setting They can make a fine website a great one. However, animations are a good thing, as they can help the user processing the contents of a website better. Some users are troubled by motion (because they may have a vestibular motion disorder or are easily distracted).įor the last group, animations in a website can be a burden.So we use proper color palettes, high contrast and make the website scalable. Some users are visually impaired (because they are color blind or their vision is decreased).So we make our websites accessible by multiple input devices such as mouse, touchscreen and keyboard. Some users cannot use a mouse (for example, permanently because they have muscular problems or temporarily when carrying a child on their arm). ![]() Users differ greatly in their needs and limitations, some are: This article shows to create a fitting solution. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |