metafizzy / metafizzy/flickity

Support `prefers-reduced-motion` media query

Open
#951 2 comments 4 reactions 0 assignees View on GitHub
feature request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.