[Feature Request] Allow for Reduce Motion Accessibility

[ggedde]

Feature Request

CountUp.js version: 2.8.0

Description

When reduce motion is set by the device or browser, it might be good to not have countUp run and instead just show the end result. I think it may be best to just have this as default, but it could make some devs and users upset so adding an option would be best.

Something like:

reduceMotion: true | 'auto' | false (default)

• true disables animation no matter the device or browser setting
• auto Looks at the device or browser setting. (Should be the default in next major release)
• false Keeps animation no matter the device or browser setting, currently this is the default.

Sure we can bypass this by wrapping countUp in a condition using our own code, but it would be really handy to not have to do that each time.

Thanks

[inorganik]

Great suggestion! Care to make a PR?

[ggedde]

Great suggestion! Care to make a PR?

Would love to, if I had time :(

[mrienstra]

Generic starting point:

let prefersReducedMotion: boolean;

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
prefersReducedMotion = mediaQuery.matches;

// to additionally track it over time, e.g. if user chooses to change this setting after initialization
mediaQuery.addEventListener('change', () => {
  prefersReducedMotion = mediaQuery.matches;
});

Where "the rubber hits the road", within the start method, lines 173-179:

    if (this.duration > 0) {
      this.determineDirectionAndSmartEasing();
      this.paused = false;
      this.rAF = requestAnimationFrame(this.count);
    } else {
      this.printValue(this.endVal);
    }

... this would be a good place to check for prefersReducedMotion. A minimal implementation could only check here, I think.

Ideally it would also be checked in the following methods: pauseResume, update & count.

Whoops, talking myself into throwing together a minimal PR, dang...

[mrienstra]

@ggedde, on the off chance you enjoy writing tests, and you have time for it, I threw together a PR! 😆