metafizzy / metafizzy/flickity
Support `prefers-reduced-motion` media query
- Dominant language
- JavaScript
- Stars
- 7.6k
- Forks
- 593
- PR merge metrics
- No merged PRs in 30d
Description
When clicking left/right paddles, the current implementation is too fast for those with motion-triggered vestibular spectrum disorder. Some users will likely experience distraction or nausea from the animation. `flickity` should attempt to support the `prefers-reduced-motion` media query.
```js
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
console.log(mediaQuery.media, mediaQuery.matches);
// Stop JavaScript-based animations.
});
```
```css
@media (prefers-reduced-motion: reduce) {
// Override CSS-based animations
}
```
Source: https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
Alternate approaches:
• Slow down animations considerably.
• Fade in/out into the next shelf pagination, instead of `smoothScroll`.
Contributor guide
Research direction
Start by tracing the left/right paddle animation and the smoothScroll path mentioned in the issue, then review how Flickity handles JavaScript-based movement. Done means the carousel responds to the prefers-reduced-motion preference, including the listed alternative behavior, without disrupting normal animation for other users.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100