Problem Statement
The README identifies Framer Motion and GSAP as core to DevPath India’s UI (hero animations, page transitions, scroll-triggered effects). However, there is no indication that these animations respect the user’s OS-level prefers-reduced-motion setting.
Current Behavior
Users with "Reduce Motion" enabled still receive full animations (entrance effects, parallax, scroll-triggered transitions). This:
- Ignores system-level accessibility preferences exposed via
prefers-reduced-motion
- Conflicts with WCAG 2.3.3 (Animation from Interactions), which requires non-essential motion to be suppressible
- Risks motion-triggered discomfort (e.g., dizziness, nausea) in sensitive users
Expected Behavior
When prefers-reduced-motion: reduce is detected:
- Disable or significantly reduce non-essential motion (parallax, large transforms, scroll-triggered animations)
- Replace with low-motion alternatives (e.g., opacity fades, reduced durations)
- Preserve essential interaction feedback (e.g., button states)
Proposed Solution
-
Framer Motion Integration:
Use useReducedMotion() (or MotionConfig reducedMotion="user") to conditionally disable transform/layout animations and fallback to minimal transitions
-
GSAP Handling:
Use gsap.matchMedia() to conditionally register animations only when (prefers-reduced-motion: no-preference) matches
-
Centralized Abstraction:
Introduce a shared utility (e.g., src/utils/motionPreferences.ts) to unify motion logic across Framer Motion and GSAP, avoiding fragmented per-component checks
-
User Override (Optional):
Add a manual “Reduce Motion” toggle (persisted via existing context providers) for environments where OS preferences are unavailable or unreliable
-
Test Coverage:
Add a Playwright test using page.emulateMedia({ reducedMotion: 'reduce' }) to verify reduced/static rendering of key animated components
Impact
DevPath India targets new developers, including accessibility-conscious users. Ignoring motion preferences creates both a compliance gap and a poor UX baseline. Implementing reduced-motion support not only aligns with accessibility standards but also establishes reusable infrastructure for future animation features.
Additional Notes
I’d like to work on this issue. I can implement the shared reduced-motion utilities, apply them to high-impact areas (landing hero, transitions), and extend coverage incrementally if needed. Suggested labels: accessibility, enhancement, level: intermediate.
Problem Statement
The README identifies Framer Motion and GSAP as core to DevPath India’s UI (hero animations, page transitions, scroll-triggered effects). However, there is no indication that these animations respect the user’s OS-level
prefers-reduced-motionsetting.Current Behavior
Users with "Reduce Motion" enabled still receive full animations (entrance effects, parallax, scroll-triggered transitions). This:
prefers-reduced-motionExpected Behavior
When
prefers-reduced-motion: reduceis detected:Proposed Solution
Framer Motion Integration:
Use
useReducedMotion()(orMotionConfig reducedMotion="user") to conditionally disable transform/layout animations and fallback to minimal transitionsGSAP Handling:
Use
gsap.matchMedia()to conditionally register animations only when(prefers-reduced-motion: no-preference)matchesCentralized Abstraction:
Introduce a shared utility (e.g.,
src/utils/motionPreferences.ts) to unify motion logic across Framer Motion and GSAP, avoiding fragmented per-component checksUser Override (Optional):
Add a manual “Reduce Motion” toggle (persisted via existing context providers) for environments where OS preferences are unavailable or unreliable
Test Coverage:
Add a Playwright test using
page.emulateMedia({ reducedMotion: 'reduce' })to verify reduced/static rendering of key animated componentsImpact
DevPath India targets new developers, including accessibility-conscious users. Ignoring motion preferences creates both a compliance gap and a poor UX baseline. Implementing reduced-motion support not only aligns with accessibility standards but also establishes reusable infrastructure for future animation features.
Additional Notes
I’d like to work on this issue. I can implement the shared reduced-motion utilities, apply them to high-impact areas (landing hero, transitions), and extend coverage incrementally if needed. Suggested labels:
accessibility,enhancement,level: intermediate.