The Ultimate List of Motion Design Resources

From the UX of motion design to inspiring creations and tools, this is a list of everything motion design.

Let me know if there is any good resource you know, and I’ll update the list. Latest additions are marked as 🆕

♻️ Last update: April 7, 2024

Some facts shared by Vitaly Friedman:

🚫 Don’t overuse transitions: frequent users find them annoying.
✅ Add animations only if they add meaning to interactions.
✅ Optimal speed for UI animation is between 200 and 500 ms.
✅ Simple feedback animations are better off with 100ms duration.
✅ Duration differs depending on the size of the object and distance.

✅ Document a trigger, transformations, duration, and easing.
✅ Easing always makes motion feel much more natural.
✅ Use ease-in when objects fly out of the screen at full speed.
✅ Use ease-out when an element appears at full speed.
✅ Ease-in-out is most typical for realistic movements.
🚫 Avoid bouncing and blur effects as it distracts attention.

✅ Reduced motion doesn’t have to mean “no motion at all”.
✅ For reduced motion, we can design alternative motion styles.
✅ Remove animation for devices with a low refresh rate.
✅ Add a motion toggle to help users turn animations on/off.
✅ For auto-playing videos/carousels, always add a “Pause” button.
✅ Good animations are brief, subtle and unobtrusive.

✅ Avoid animations that cover up large screens.
✅ Avoid horizontal scroll while users are scrolling vertically.
✅ Avoid moving elements at different speeds, such as parallax.
✅ Avoid automatic animations; let users trigger Motion instead.
✅ Avoid animations where there is no user focus.
✅ Limit flashes three times or less per second.
✅ Avoid roughy bounces.
✅ Make sure animations don’t interfere with screen magnifiers.
✅ Respect the Screen Reader for Motion Accessibility.
✅ Let users reduce the Motion if needed.

Resources

Inspiration

• Motionimo — Motion designers’ Headquarters
• App Motion — Mobile motion design gallery

Learning

• Easing Functions Cheat Sheet
• Transition animations: a practical guide
• UX Motion · PENCIL
• Executing UX Animations: Duration and Motion Characteristics
• Animation for Attention and Comprehension
• Revisting prefers-reduced-motion | CSS-Tricks — CSS-Tricks
• Respecting Users’ Motion Preferences
• The ultimate guide to proper use of animation in UX
• 5 steps for including motion design in your system
• Building a motion design system for a product company
• Motion Design System — A Practical Guide | by Aviad Shahar — Tendler
• Creating Usability with Motion: The UX in Motion Manifesto
• Including Animation In Your Design System — Smashing Magazine
• How to Apply Disney’s 12 Principles of Animation to UI Design
• Motion in UX Design: 6 Effective Types of Web Animation
• IBM Design Language — Overview
• Designing Interface Animation
• The Role of Animation and Motion in UX
• Animation in Design Systems
• Readymag Design Almanac: Animation
• Motion Graphic Design & Animation Principles Website

Tools

• cubic-bezier
• Space Type Generator
• Easings — Generate Cubic Bezier Easing Curves
• Rive
• Jitter
• Spline 🆕
• Lottielab 🆕
• Lottie Creator 🆕
• Origami Studio 🆕
• Flinto 🆕
• Principle 🆕
• Adobe After Effects 🆕
• Adobe Premiere Pro 🆕

People & Accounts to Follow

• Louis Paquet — Creative Director
• Aristide Benoist — Web development, motion, interaction
• Sam Selikoff — Making quality videos on frontend development
• The Coding Train — Creative coding livestreams and tutorials with Daniel Shiffman
• Bruno Simon — Creative developer
• Dae In Chung — Composes motion with code

📌 PS. Discover design resources from various categories like UI, UX, Motion, Icons, Illustrations, and more → subscribe to fountn.design newsletter and receive a weekly dose of product design resources.