Accessibility

viewmotion respects user accessibility preferences out of the box. No configuration needed.

prefers-reduced-motion

When the user has prefers-reduced-motion: reduce enabled in their OS settings, viewmotion automatically skips all animations. Elements are revealed instantly without any motion.

/* viewmotion includes this internally — you don't need to add it */
@media (prefers-reduced-motion: reduce) {
  [data-motion] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

This means:

• No IntersectionObserver is created — the animation system is skipped entirely
• Content is always visible — never hidden behind unplayed animations
• Users with vestibular disorders won’t experience unwanted motion
• No manual configuration required — it works automatically
• WCAG 2.1 compliant (Success Criterion 2.3.3)

Best practices

Do: Use animations to enhance content discovery, not to gate it. All content should be accessible even if animations never play.

Don’t: Don’t rely on animations for critical information or navigation cues. Animations should be decorative, not functional.