# Motion

Key motion design resources that shaped our guidelines.

Tabs: [Overview](/foundations/motion/motion.overview.md) · [About](/foundations/motion/motion.about.md) · [Design](/foundations/motion/motion.design.md) · [Accessibility](/foundations/motion/motion.accessibility.md) · [Resources](/foundations/motion/motion.resources.md)

- [Making interfaces feel "fancy" with animated transitions](https://material.io/blog/motion-research-container-transform) (Google)
- [Material UI Motion Guidelines](https://m3.material.io/styles/motion/overview) (Google)
- [Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) (Issara Willenskomer)
- [Atlassian Design System - Motion Guidelines](https://atlassian.design/components/motion/about)
- [Carbon Design System - Motion Guidelines](https://carbondesignsystem.com/guidelines/motion/overview/) (IBM)
- [Respecting the `prefers-reduced-motion` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) (MDN)
- [Apple's accessibility guidelines on motion](https://developer.apple.com/design/human-interface-guidelines/accessibility#Motion)
- [Accessible Animations in React](https://www.joshwcomeau.com/react/prefers-reduced-motion/) (Josh W Comeau)
- [Respecting Users' Motion Preferences](https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/) (Smashing Magazine)

## Useful documentation when building animations

- [Motion](https://motion.dev/)
- [Lottie](https://docs.lottiefiles.com/lottie-player/components/lottie-react)