Motion · Foundations

Reduced Motion

Some people get dizzy from movement on screen. When they ask for less motion, remove movement but keep the fades that explain what changed.

In CSS#

The foundation shortens every CSS animation and transition when prefers-reduced-motion is set. Nothing to do per component.

@media (prefers-reduced-motion: reduce) {  *, ::before, ::after {    animation-duration: 1ms !important;    transition-duration: 1ms !important;  }}

In Motion#

JavaScript animations do not see that CSS rule. Read the preference with useReducedMotion and swap movement for a fade.

import { motion, useReducedMotion } from "motion/react"export function Panel() {  const reduce = useReducedMotion()  return (    <motion.div      initial={{ opacity: 0, y: reduce ? 0 : 16 }}      animate={{ opacity: 1, y: 0 }}    />  )}

Try it#

Toggle the switch to see the same entrance with and without movement.

Reduce motion