Skip to content
← All notes

Architecture//4 min read

Engineering Motion-Heavy Interfaces with Full Accessibility

Designing expressive, high-energy websites that gracefully degrade to clean, accessible layouts for users with vestibular sensitivities.

#Accessibility#Reduced Motion#GSAP#CSS#Design Systems

The False Dilemma: Motion vs Accessibility

Developers often view accessibility as the antithesis of creative, motion-driven web experiences. However, accessibility does not mean stripping your site of identity; it means providing an equally intentional alternate experience when users request reduced motion.

The Golden Rule of Reduced Motion

Never rely on JavaScript animations to reveal critical content. If a title or metric starts at opacity: 0 in HTML and waits for a scroll-triggered GSAP tween to reach opacity: 1, users with JavaScript disabled or reduced motion preferences will receive a blank screen.

typescript
// In JavaScript / GSAP setup:
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (prefersReduced) {
  // Ensure all animated elements are immediately visible
  gsap.set('.anim-hero, .fade-in, #hero-text, #hero-subtitle', {
    opacity: 1,
    y: 0,
    x: 0,
    filter: 'none',
    clearProps: 'all',
  });
  return;
}

CSS Fallbacks for Layout Stability

Combine JavaScript guards with CSS media queries. Ensure smooth scrolling, heavy blur transitions, and rotational skew transformations are neutralized at the stylesheet layer.

css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}