#413: UX Motion and Animation

How to document UX motion, animation, transitions — with useful animation tooling and motion-focused examples from design systems. Issue #413 • July 11, 2023 • [View in the browser]( [Smashing Newsletter]( Labas vakaras Smashing Friends, For a very long time, I was absolutely clueless about animation. What’s the right timing? What easing functions to use? When should I use the cubic-bezier function in CSS? How do I profile our products for motion? And how do I document all these decisions on animation in a design system? Let’s figure it out! In this newsletter, we’ve put together a few useful case studies, tools and examples that you can explore and use in your work to manage animations, transitions and motion in UX. We hope you find them useful! [Smashing Workshops]( On the Smashing side of things, we have recently announced a few [shiny new online workshops]( from accessibility and typography to design KPIs and HTML email. You probably will find a few gems in there! And if it’s not for you, perhaps you could recommend a workshop to your friends and colleagues? Thank you for your support! We hope you’ll also find a bit of time to stay away from your machine this week and get a chance to get together with your friends and your family. Sincerely sending you all the positive energy and good vibes, everyone! 🎉🥳 — [Vitaly]( --------------------------------------------------------------- 1. A Complete Guide To Animation As designers, we often argue about the perfect duration and speed of animations, to use or not to use motion blur (better not), to ease or not to ease, and how transitions should be choreographed. [A Complete Guide To Animation]( In his [guide]( Taras Skytskyi has kindly put together plenty of examples and guidelines for the proper use of animation in UX. You might disagree with some of them, but they are interesting conversation starters to keep in mind when designing transitions. Useful pointers for the bookmarks! (vf) --------------------------------------------------------------- 2. Motion Scale And Dynamic Duration We could apply a similar workflow that we use to define color palettes and typographic scales to the way we design motion. In his article on [motion design in design systems]( Caleb Barclay highlights a comprehensive overview of how to integrate motion to its full extent into a design system. [Motion Scale And Dynamic Duration]( We start by identifying patterns such as timing curves, types of usage, choreography patterns, effects and flows. Then we define guiding principles for motion. Then we consider duration, easing, effects and choreography. And finally, we prepare translation specs for diagrams and text — a very comprehensive guide for any design system that includes some motion. (vf) --------------------------------------------------------------- 3. How To Run A Motion Audit You might have plenty of animations and transitions in your product, yet ultimately you want to standardize the motion language that you are using and bring them together under the umbrella of a single motion design system. Where do we start? [How To Run A Motion Audit]( Dushyant Dubey has put together [a thorough case study]( of the process when building the Blade design system: from planning and motion audit to defining motion parameters and implementing motion tokens. The article also features plenty of examples of micro and macro interactions — a great reference to keep close. (vf) --------------------------------------------------------------- From our sponsor Dozens Of Apps. One Subscription. Try Setapp. [MacPaw]( Setapp makes it easy for users to access a wide range of productivity apps with just one subscription. From task management to code editing, [Setapp has all the tools you need]( to streamline your workflow. With a single account, you can try out as many apps as you like! --------------------------------------------------------------- 4. Tools For UX Motion And Animation How do you figure out just the right keyframes animation and cubic-bezier() parameters? Typically this would require quite a bit of experimentation with random values and using an animation debugger in DevTools to find a better animation. But there are some tools that can help you avoid the hassle. [Tools For UX Motion And Animation]( The [Keyframes easings editor]( lets you to define and preview custom keyframes animations and copy CSS once you are done. Lea Verou’s [Cubic-Bezier]( allows you to define cubic-bezier parameters and change transitions on the fly. Just a few helpful tools that make it easier to manage animation in CSS! (vf) --------------------------------------------------------------- 5. Upcoming Workshops and Conferences That’s right! We run [online workshops]( on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [Figma Workflow Masterclass]( UX with Christine Vallaure. July 20–28 - [Advanced JavaScript Masterclass]( Dev with Christophe Porteneuve. Aug 16–30 - [Interface Design Patterns UX Training]( UX with Vitaly Friedman. Sep 8 – Oct 6 - [Accessible Components from Design to Development]( Dev with Carie Fisher. Sep 14–22 - [Universal Principles of Typography Masterclass]( UX with Elliot Jay Stocks. Oct 16–30 - [Strategizing Products and Customer Experiences (SPACE)]( UX with Debbie Levitt. Oct 18–26 - [Design KPIs Masterclass]( UX with Vitaly Friedman. Oct 31 – Nov 8 - [Building Modern HTML Emails]( Dev with Rémi Parmentier. November 9–17 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. Documenting Motion In Design Systems How do we document motion design in our design system? Surely we need to think about principles, guidelines and examples, and surely some animations will be more prominent than others. What if we build a timing duration calculator, depending on the movements in our UI? Well, that’s exactly what the [Brainly Design System]( includes. [Documenting Motion In Design Systems]( The documentation covers effective duration scale, choreography guidelines, micro and macro-animations — with slowed down previews and a duration guide — a very helpful and inspiring overview with considerations for reduced motion and motion accessibility. (vf) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS In Information Design And Strategy [Northwestern’s Online MS In Information Design And Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more →]( --------------------------------------------------------------- 7. Creating Usability With Motion Animation is all about tools. UX/UI designers often tend to face challenges when having to use motion as a design tool to support usability. UI Animation is typically thought of by designers as something that makes the user experience more delightful but, overall, doesn’t add much value. [Creating Usability With Motion]( Issara Willenskomer shares a [Motion Manifesto]( in which he breaks down the topic of UI Animation, real-time versus non-real-time interactions, how motion supports usability, principles, techniques, properties, and values. A guide that is bound to help any designer find their own way and design tool to start supporting usability in their UX projects — guaranteed! (il) --------------------------------------------------------------- 8. News From The Smashing Library 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Jump to all books →]( [Success At Scale]( Psst! We’re working on a new book: [Success At Scale]( shipping in Fall 2023! [Pre-order your copy]( or [browse the book library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [How To Become A Better Speaker At Conferences]( - [Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images]( - [The UX Of Flight Searches: How We Challenged Industry Standards]( - [Sustainable Design Toolkits And Frameworks]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](