UX Motion that Respects Users

Principles

Motion is a language. It should clarify state changes, guide attention, and create delight—never impede task completion.

Motion with intent

• Animate purposefully: entrance reveals, state transitions, and feedback
• Favor low‑amplitude, high‑clarity primitives: fade, scale, and subtle parallax
• Define timing curves: fast‑out/slow‑in for entrances, linear for loaders

Accessibility first

• Respect prefers-reduced-motion: offer instant or gentler transitions
• Ensure focus order and keyboard paths never depend on animation
• Keep contrast and legibility during motion; avoid moving large blocks of text

Practical patterns (React + Framer Motion)

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

import { m as motion, useReducedMotion } from 'framer-motion'

function Card({ children }){
  const reduce = useReducedMotion()
  const transition = reduce ? { duration: 0 } : { duration: 0.28, ease: [0.2, 0.8, 0.2, 1] }
  return (
    <motion.div initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.35 }} transition={transition}>
      {children}
    </motion.div>
  )
}

Performance budgets

• Target 60fps on mid‑range devices; avoid layout thrash (transform/opacity only)
• Keep sequences short (<400ms) and stagger minimally for long lists
• Test on mobile networks and low‑end GPUs

Do/Don’t

• Do: reveal hierarchy and confirm actions
• Don’t: block input with long hero animations or heavy motion on scroll

Thoughtful motion makes interfaces feel premium and effortless. Want help tuning motion for your product? See our Projects or email contact@risegravity.com.