July 8, 2025 Smashing Newsletter: Issue #515
This newsletter issue was sent out to 188,818 subscribers on Tuesday, July 8, 2025.
Editorial
Designing animation might sometimes feel like a hit or miss. What’s the right easing function to use? What about the duration? Should destructive actions be animated differently from confirmations? And if motion feels a bit inconsistent at times, how do we run a motion audit?
This newsletter tries to find answers to these questions. The issue is all about designing better animation — from animation in design systems to principles of animation to running a motion audit and accessibility considerations.
We are also getting ready for our new SmashingConf adventures this year — with practical insights all around accessibility, UX, design systems, CSS, and front-end:
- Freiburg 2025 🇩🇪 (Sep 8–11), on design systems, complex UIs, refactoring and performance,
- New York 2025 🇺🇸 (Oct 6–9), on UX, design, dashboards, accessibility, CSS, design systems,
- Amsterdam 2026 🇧🇪 (Apr 13–16), UX, design, Figma, CSS, accessibility, and product design.
- In-person Workshops in Antwerp and Madrid 🇧🇪 🇪🇸 (Sep–Nov 2025), on Figma and Complex UIs.
We hope to see you there, and in the meantime, happy animation time, everyone! 🎉🥳
— Vitaly
1. Motion Design Inspiration
How about some motion design inspiration? We came across two wonderful resources that provide you with plenty of real-world examples of exceptional motion design.
Spotted in Prod collects screen record posts from a wide variety of apps, from large companies to craft-focused startups and indie developers. You can browse them by flows, patterns, gestures, visuals, design languages, and more.
Another curated collection of interface animations, transitions, and gestures is Motion Log. All animations are presented in an interactive viewer that lets you scrub through the motion frame by frame — perfect for observing all the fine little details. Happy browsing! (cm)
2. Respecting Motion Preferences
Not everyone experiences motion in the same way. What might feel smooth and delightful to some can be distracting to others and, in the worst case, cause nausea or seizures. That’s why it’s critical that we adapt motion to users’ preferences.
In her article “Respecting Users’ Motion Preferences,” Michelle Barker explains how the prefers-reduced-motion media query helps us write reduced motion styles. And she looks into another approach, too: an explicit motion toggle.
Compared to prefers-reduced-motion, which only caters to users who are aware of the feature in their system settings, the toggle makes toggling motion on and off accessible to an even wider range of users. (cm)
3. Animation Design System
How do we document motion in a design system? We’ll need to think about principles, guidelines, and examples, and surely, some animations will be more prominent than others. We could also build a timing duration calculator depending on the movements in our UI. Well, that’s exactly what Brainly’s Pencil Design System includes.
The documentation covers effective duration scale, choreography guidelines, and micro and macro animations — with slowed-down previews and a duration guide. Considerations for reduced motion and motion accessibility are also included. A treasure chest for anyone looking for ideas on how to incorporate motion in their design system. (cm)
4. Animation For Designers
What do we need to consider to ensure our UI animations feel natural and don’t distract users from the task they want to perform? In his practical guide to animation in UX, Taras Skytskyi explains all the rules and principles you need to be aware of to create delightful animation effects that feel just right.
The guide covers everything from animation duration and speed to easing and choreography. You’ll learn to adapt your animations to different screen sizes and platforms, how to read animation curves, and how to guide your users’ attention when transitioning from one state to another. The guide isn’t about specific use cases but rather universal principles that you can apply to all kinds of interface animations. A must-read. (cm)
5. Upcoming Workshops on UX and Front-End
That’s right! We run online workshops on front-end 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.
As always, here’s a quick overview:
- Figma Workflow Masterclass Design
with Christina Vallaure. July 23–29 - Building Interactive, Accessible Components with Modern CSS & JS Dev
with Stephanie Eckles. Aug 18–27 - UX Strategy Masterclass UX
with Vitaly Friedman. Aug 20–29 - Dataviz Accessibility Workshop Dev
with Sarah L. Fossheim. Sep 22–Oct 6 - Workshops in Antwerp & Madrid 🇧🇪 🇪🇸
on Figma and Complex UIs. Sep–Nov 2025 - How To Measure UX and Design Impact UX
with Vitaly Friedman. UX bundle (video + UX training) - Jump to all workshops →
6. How To Include Motion In Design Systems
At first glance, motion might seem too complex to integrate into a design system, so it is often left out of the discussion. However, with the right strategy, the workflow isn’t much different than the one you use to define color palettes or typographic scales. To help you overcome motion paralysis, Caleb Barclay shares a step-by-step guide to including motion in a design system.
Caleb’s approach involves five steps, from deciding what to add to the design system and establishing motion principles to defining a library of motion building blocks and preparing translation specs with everything developers need to build a prototype. A comprehensive roadmap you might want to keep close. (cm)
7. How To Run A Motion Audit
Lacking resources on how to set up a motion system, Dushyant Dubey researched different design systems to create a detailed plan on how to tackle the challenge. In his case study “Building a motion design system for a product company,” he grants insights into the strategy and how he and his team applied it when building the Blade motion design system.
The case study covers the entire process, from planning and running a motion audit to defining motion parameters and implementing motion tokens that encapsulate specific motion behavior for component interactions. It also features plenty of examples of micro and macro interactions. An invaluable resource for systemizing motion. (cm)
8. Meet Accessible UX Research, A Brand-New Smashing Book 📚
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. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”
“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print shipping in August, eBook available for download later this summer. Pre-order the book, and save off the full price.
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.