#473: Motion and Animation

Practical guides to transition animations, cheatsheets, a library of loading and progress indicators and how to design systems that focus on animation UX.Issue #473 • Sep 10, 2024 • [View in the browser]( [Smashing Newsletter]( Hallole Smashing Friends, As I’m writing these words, we are running our annual [SmashingConf Freiburg]( in our hometown Freiburg, Germany, with plenty of sessions and workshops around accessibility, CSS/JS, design systems and good ol’ front-end. [SmashingConf Freiburg 2024]( Second day of [SmashingConf Freiburg](. 🎉 Image credit: [Naoto Sai]( We’ll be running more Smashing onsite events this year, and we also have a few [front-end & UX online workshops]( which we run in the very same smashing spirit: - [SmashingConf NYC]( 🇺🇸 (Front-End & UX, Oct 7–10) - [SmashingConf Antwerp]( 🇧🇪 (Design & UX, Oct 28–31) - [A Smashing Hour with Heydon Pickering]( (moderated by Geoff Graham on Sept 24) - [Meets Live Design Challenge]( (with Pablo Stanley, Christine Vallaure and Oliver Schöndorfer on Sept 26) [A Smashing Hour with Heydon Pickering]( [Register your ticket here]( — this community event is free for all. The Smashing team heads to New York 🇺🇸 for [SmashingConf NYC 2024]( next month with sessions on design systems, CSS, accessibility, and so many other things. There are some lovely workshops as well. We can’t wait — and we can’t wait to see you there! — [Iris LjeÅ¡njanin]( --------------------------------------------------------------- 1. Design Systems With Animation UX Animation and Motion UX haven’t made an appearance in a lot of design systems yet. Still, there are some incredible examples already of what a design system focused on animation can look like. One of them is the [PENCIL design system]( by Brainly. With duration scales, choreography guidelines, micro and macro animations, slowed-down previews, and a duration calculator, it is a treasure chest for anyone looking for ideas on how to incorporate motion in their design system. [PENCIL Design Systems]( To dive deeper into the topic, also be sure to check out Vitaly’s [collection of design systems with an animation focus](. Apart from design systems from brands like IBM, Audi, and GE Healthcare, it also includes useful resources on animation, motion design, motion choreography, motion accessibility, and more. Inspiring! (cm) --------------------------------------------------------------- 2. Practical Guide To Transition Animations Transition animations are a small but effective way to make products more intuitive and attractive to use. They smoothly guide users through an interface and give them clear feedback on their actions. So, how can we fully harness their power and create the best experience for our users? [Transition animations]( In his practical [guide to transition animations]( Dongkyu Lee dives deep into six principles for better transition animations that you can use in your design workflow right away. Examples show each principle in action — from fading in and out with opacity to balancing speed and establishing spatiality. A fantastic introduction to enhancing a UI with motion. (cm) --------------------------------------------------------------- From our sponsor See What Your Users See, With Clarity [Microsoft Clarity]( [Microsoft Clarity]( is a free visual analytics tool that makes it easy to understand the behaviors and experiences of your users. Discover the exact ways that they explore your website. Where they are focusing their time, what is grabbing their attention, and where they are hitting roadblocks. [Get started today](. --------------------------------------------------------------- 3. Easing Functions Cheat Sheet Objects in real life don’t start moving at full speed and then stop abruptly. Physical motion is smoother. Take a bouncing ball, for example: It accelerates as it drops to the ground, then bounces back up. Or when we open a drawer, we first move it quickly and slow it down as it comes out. Easing functions help us apply these motion principles to animations on the web to make them feel more natural. [Easing Functions]( To help you choose the right easing function, Andrey Sitnik and Ivan Solovev created a handy [cheat sheet](. It covers thirty easing functions — from the simple easeInSine to the more advanced easeInOutBounce. For each function, the cheat sheet lists the CSS, PostCSS, and math function, and, if possible, the CSS gradient. One for the bookmarks. (cm) --------------------------------------------------------------- 4. 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: - [Deep Dive On Accessibility Testing]( dev with Manuel Matuzović. Sep 23 – Oct 7 - [Inclusive Design Patterns For 2025]( free with Vitaly Friedman. Sep 24 - [Accessible Typography for Web & UI Design Masterclass]( design with Oliver Schöndorfer. Oct 10 – 18 - [Cascading Style Systems: Resilient & Maintainable CSS]( dev with Miriam Suzanne. Oct 14 – 18 - [Interface Design Patterns UX Training (Autumn 2024)]( ux with Vitaly Friedman. Nov 1 – Dec 2 - [Advanced Design Systems]( workflow with Brad Frost. Nov 12–20 - [Figma Workflow Masterclass]( design with Christine Vallaure. Nov 14–22 - [Smart Interface Design Patterns]( UX video course with Vitaly Friedman. - [Jump to all workshops →]( --------------------------------------------------------------- 5. Animation Execution And Usability Purpose and execution are the two dimensions that make animations a positive aspect of a user experience. If we don’t get both right, an animation can do more harm than good, being distracting, annoying, and even dizzying. [Executing UX Animations]( Page Laubheimer takes a closer look at the [execution side of animations]( and explores how we can define a trigger, transformations, duration, and easing of the animation while being mindful of accessibility issues and annoying the user. Aurora Harley also wrote a wonderful [article on animation usability](. To help us design meaningful animations that attract a user’s attention without being obtrusive, she dives deeper into the peculiarities of peripheral motion, frequency, and choosing appropriate animation mechanics. As Aurora recommends, employ animations sparingly and only when they add meaning to the interaction — otherwise, you risk wasting a precious currency: your users’ attention and time. (cm) --------------------------------------------------------------- From our sponsor Deliver Great UI With Easily Customizable Page Templates And Building Blocks [Progress KendoUI]( Deliver a great user experience with professionally designed and easily customizable Page Templates and Building Blocks! Utilize a collection of over 50 building blocks and 10 page templates designed to help you build modern UI in no time — all you need to do is copy and paste. [Try Progress KendoUI today](. --------------------------------------------------------------- 6. Accessible Motion Not everyone experiences motion in the same way. What might feel smooth and slick to some can be distracting to others and, in the worst case, cause nausea or seizures. The prefers-reduced-motion media query helps us adapt motion to users’ preferences. Michelle Barker summarized [how to use it to write reduced motion styles]( and make your sites more accessible. [Respecting Users’ Motion Preferences]( However, reducing motion doesn’t necessarily mean removing all transforms from your site either. As Michelle points out, we must provide a clear alternative style to indicate when an action has occurred. She also looks into a different solution to let users control motion: an explicit motion toggle. Stephanie Cree’s post on accessible motion is another helpful read to better understand [why motion accessibility is essential]( and how to do it right. In it, she explains who needs accessible motion and explores steps you can take to create experiences that don’t leave anyone out. (cm) --------------------------------------------------------------- 7. Loading And Progress Indicators Whether it’s loading a webpage, processing a transaction, or downloading content — often there’s no way around waiting. Of course, the primary focus should always be improving performance and responsiveness, but sometimes that’s not enough. To help you enhance the waiting experience, Taras Bakusevych shares valuable [tips and best practices for loading and progress indicators](. [Loading And Progress Indicators]( In his post, Taras explores how loading and progress indicators can enhance usability, reduce user frustration, and create a positive perception of your page’s or system’s responsiveness. He dives deeper into the psychology of waiting and takes a closer look at the different types and variations of loaders. You’ll also learn how to select the right loader based on the anticipated waiting time and what else to keep in mind to make your users’ waiting experience seamless and engaging. (cm) --------------------------------------------------------------- From our sponsor The 2024 State of Marketing And Web Development Collaborative Workflows [Netlify]( Developers and marketers have longstanding business relationships, but lately, the tools and processes meant to drive success and collaboration have fallen short. [Access the report]( for data that uncovers these teams’ most common challenges and practical solutions for overcoming them. --------------------------------------------------------------- 8. Recently Published Books 📚 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? - [Success at Scale]( by Addy Osmani - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Check out all books →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [How To Create A Weekly Google Analytics Report That Posts To Slack]( - [Sticky Headers And Full-Height Elements]( - [The Difference Between Digital Product And Web Design]( - [Goodbye Summer, Hello September!]( --------------------------------------------------------------- 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 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](