Support for prefers-reduced-motion

src/ui/camera.js

@@ -679,7 +679,7 @@ class Camera extends Evented {
             easing: defaultEasing
         }, options);
 
-        if (options.animate === false) options.duration = 0;
+        if (options.animate === false || browser.prefersReducedMotion) options.duration = 0;
 
         const tr = this.transform,
             startZoom = this.getZoom(),
@@ -857,6 +857,18 @@ class Camera extends Evented {
      * @see [Fly to a location based on scroll position](https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/)
      */
     flyTo(options: Object, eventData?: Object) {
+        // Fall throwugh to jumpTo is user has set prefers-reduced-motion
+        if (browser.prefersReducedMotion) {
+            this.jumpTo({
+                center: options.center,
+                zoom: options.zoom,
+                bearing: options.bearing,
+                pitch: options.pitch,
+                around: options.around
+            }, eventData);
+            return;
+        }
+
         // This method implements an “optimal path” animation, as detailed in:
         //
         // Van Wijk, Jarke J.; Nuij, Wim A. A. “Smooth and efficient zooming and panning.” INFOVIS

src/util/browser.js

@@ -19,6 +19,8 @@ const cancel = window.cancelAnimationFrame ||
 
 let linkEl;
 
+let reducedMotionQuery: MediaQueryList;
+
 /**
  * @private
  */
@@ -53,7 +55,16 @@ const exported = {
     },
 
     hardwareConcurrency: window.navigator.hardwareConcurrency || 4,
-    get devicePixelRatio() { return window.devicePixelRatio; }
+
+    get devicePixelRatio() { return window.devicePixelRatio; },
+    get prefersReducedMotion(): boolean {
+        if (!window.matchMedia) return false;
+        //Lazily initialize media query
+        if (reducedMotionQuery == null) {
+            reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        }
+        return reducedMotionQuery.matches;
+    },
 };
 
 export default exported;