Support for prefers-reduced-motion #8494

arindam1993 · 2019-07-16T23:42:38Z

briefly describe the changes in this PR
document any changes to public APIs
manually test the debug page

Addresses #8288.
Defaults the animation duration to 0 when prefer-reduced-motion is set to reduce.

How to set this on your local machine:
https://developers.google.com/web/updates/2019/03/prefers-reduced-motion

…uced motion turned on in OS

mourner

This generally looks good, but with a few considerations:

With this change, animation will never happen with prefersReducedMotion even if the developer sets it explicitly. Should we instead only set the default duration to 0, while any explicitly set duration is respected? Not fully sure about this, @CharlesBelov maybe you have thoughts on this?
Does this need an equivalent change in flyTo?

mourner · 2019-07-17T08:24:44Z

src/util/browser.js

@@ -19,6 +19,8 @@ const cancel = window.cancelAnimationFrame ||

 let linkEl;

+let _reducedMotionQuery: MediaQueryList;


Nit: maybe remove the dangling _ in the name for consistency? This will be private anyway since it's not exposed.

CharlesBelov · 2019-07-17T18:02:24Z

@mourner: Actually, that is the whole point of prefersReducedMotion, that the developer can use as much animation as they want and the person who doesn't want to see animation will never see it but others who are okay with animation will see it.

So, no, it's not appropriately a default, it is an override, similar to using !important on a user CSS style sheet.

As for the flyTo question, my original issue specifically mentioned:

What parts of the Mapbox GL ecosystem will need to change to accommodate this design?

flyTo, jumpTo, and easeTo

so if flyTo is missing from this change then the change is incomplete.

arindam1993 · 2019-07-18T00:53:00Z

Thanks for the quick review @mourner !
I interpreted the desired behavior to be as @CharlesBelov mentioned, a global force-disabling of all animations.

I added the change to flyTo as well!

andrewharvey · 2019-07-18T02:05:36Z

@mourner: Actually, that is the whole point of prefersReducedMotion, that the developer can use as much animation as they want and the person who doesn't want to see animation will never see it but others who are okay with animation will see it.

So, no, it's not appropriately a default, it is an override, similar to using !important on a user CSS style sheet.

I agree, the whole point is a developer can build with full animations and if the user asks for no animations via prefersReducedMotion, they don't need to do any checks themself, mapboxgl will automatically comply with the users request.

mourner

Thanks for the explanations, agreed! I'm 👍 on this, pending a small nit and a green build (fixing flow errors).

mourner · 2019-07-18T12:34:47Z

src/ui/camera.js

+                pitch: options.pitch,
+                around: options.around
+            }, eventData);
+            return;


Should be return this (or return this.jumpTo(...)) for consistency/chaining.

arindam1993 · 2019-07-18T18:33:49Z

Thanks @mourner ! changes made 👍

asheemmamoowala

Is there a way to add a unit/render test for this?

asheemmamoowala · 2019-07-18T19:02:35Z

src/ui/camera.js

@@ -857,6 +857,17 @@ 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


arindam1993 · 2019-07-18T19:19:17Z

Is there a way to add a unit/render test for this?

I think I can write a test and model it after the can be called from within a moveend event handler in camera.test.js, it does asynchronous timing based things as well.

arindam1993 · 2019-07-18T23:39:47Z

Added unit tests 👍

…uced-motion-8288

CharlesBelov · 2019-07-19T00:17:58Z

Possibly one more typo:
// Fall through to jumpTo is user has set prefers-reduced-motion
might correctly be
// Fall through to jumpTo if user has set prefers-reduced-motion

asheemmamoowala

Good to go, just a last typo left.

asheemmamoowala · 2019-07-19T20:42:11Z

test/unit/ui/camera.test.js

@@ -869,6 +881,14 @@ test('camera', (t) => {
            }, 0);
        });

+        t.test('duration is 0 when prefers-reduced-motions: reduce is set', (t) => {


nit: typo motions

dieterdreist · 2019-09-04T15:44:52Z

I agree it can be very consistent to remove flyTo and easeTo animations, in certain circumstances (particularly, rather short animations, "eye gimmicks", when the animations are not required for functional reasons.
But if you use the animations as integral part of your app (e.g. to fly somewhere in many seconds, to give the user an overview over a bigger area with an automatic flight...), then this will break the app.

andrewharvey · 2019-09-05T00:47:10Z

But if you use the animations as integral part of your app (e.g. to fly somewhere in many seconds, to give the user an overview over a bigger area with an automatic flight...), then this will break the app.

But still the user has requested reduced motion, I would think that means no more than 1 frame per second. What about just reducing the animation to larger one second steps? That avoids animations but still gives the user a view of the the fly operation?

dieterdreist · 2019-09-07T14:00:00Z

"reduced motion" is not about frames per second. It is about reducing "useless" motion (eye candy).

If you activate the function, would you expect your videos to playback with 1 frame per second?

Did you notice how Apple values this setting? They use less "effects" (e.g. no parallax effects or icon animations on the home screen, or simpler text animations in the keyboard), but some UI elements like the drawers for notifications (from top) or settings (from bottom) animate just the same. The latter don't "jump" or pop up instantly, they smoothly move into the screen as if you hadn't requested reduced motion.

I had activated the reduced motion, because it offered my a cleaner and less distracting experience while supposedly also saving on battery. I read this often as advice in the web, it is not just a feature for people with visual problems. Core functionality should keep working.

If you still believe activating "reduced motion" means that any flyTo and easeTo animation in mapbox-gl must be converted into a jumpTo, then please make this customizable / a setting.

andrewharvey · 2019-09-08T04:28:03Z

According to https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.

My interpretation of this is it depends on the app, if you're building an animation with a slow ease fly to different locations, then I could consider that essential as it's core to the experience or app, if you're building an app where you search for a location and the map flys to that location, then I could consider that animation non-essential as you can just skip straight to the destination. Sure the animation is nicer and is a better UX, but still non-essential.

With that in mind it could be we expose some kind of option so the app developer can say if this transition is considered essential or not?

The smooth zoom in you get when you click the navigation zoom in button is another example, I would classify as non-essential and should respect prefers-reduced-motion.

CharlesBelov · 2019-09-09T19:09:42Z

In short, the three issues that are covered by this are:

Motion sickness
Attention disruption
Battery life

Distinguishing between essential motion and non-essential motion:

User has requested a different view - non-essential
User has requested an animation going from this view to that view - essential

So, a developer might offer two options:

Go to point B
Fly from point A to point B

The problem becomes if the developer doesn't give a choice and assumes the user wants the fly option.

So, yes, it would be fine if the developer can specify that a particular animation is essential, but it would not properly be the default and there needs to be a non-animating option.

As for the Apple UX drawer slide, it is non-essential, so I view it as a failure in implementation.

andrewharvey · 2019-09-10T01:52:34Z

See the proposal at #8743.

CharlesBelov · 2019-09-25T01:37:48Z

I have an update to my immediately previous comment.

Actually, with iOS 13, Apple has now added a separate preference, Settings > Accessibility > Motion > Prefer cross-fade transitions, described as "Reduce the motion for user interface controls that slide in when appearing and disappearing."

I'm not sure how they expose this to applications or how applications would in turn expose this to websites.

feat/reduced-motion: change animation duration to 0 when user has red…

a9a2474

…uced motion turned on in OS

arindam1993 requested a review from asheemmamoowala July 16, 2019 23:42

Fix failing tests

b8448ad

mourner reviewed Jul 17, 2019

View reviewed changes

address CR comments and add check to flyTo

b6078c2

fix CI errors

874c650

mourner reviewed Jul 18, 2019

View reviewed changes

fix flow error

c96f042

mourner approved these changes Jul 18, 2019

View reviewed changes

asheemmamoowala reviewed Jul 18, 2019

View reviewed changes

add unit tests

2a84613

Arindam Bose added 2 commits July 18, 2019 16:55

make tests more robust to CI timing issues

dc165f0

Merge branch 'master' of github.com:mapbox/mapbox-gl-js into feat/red…

a5e1465

…uced-motion-8288

Arindam Bose added 3 commits July 18, 2019 17:23

fix typo

8b96dc4

add js docs comments

e4f40a9

trim trailing whitespace

602b17a

asheemmamoowala approved these changes Jul 19, 2019

View reviewed changes

fix yet another typo

6f84951

arindam1993 merged commit 3dce2ca into master Jul 19, 2019

This was referenced Jul 19, 2019

Disable animations and transitions when reduced motion accessibility setting is enabled mapbox/mapbox-gl-native#15187

Closed

Support prefers-reduced-motion #8288

Closed

mourner mentioned this pull request Aug 16, 2019

flyTo is broken since v1.2 #8648

Closed

mourner mentioned this pull request Sep 9, 2019

A more granular control over handling of prefers-reduced-motion #8743

Closed

mourner deleted the feat/reduced-motion-8288 branch September 9, 2019 14:38

andrewharvey mentioned this pull request Oct 21, 2019

add essential option to AnimationOptions to ignore prefers-reduced-motion for essential animations #8883

Merged

8 tasks

ryanhamley mentioned this pull request Nov 12, 2019

map.fitBounds does not animate #8970

Closed

stepankuzmin mentioned this pull request Mar 28, 2023

Disable panning inertia if prefers-reduced-motion is enabled #12631

Merged

4 tasks

fomofahg mentioned this pull request Aug 8, 2023

add animationEssential parameter as additional option for flyTo and easeTo in the storytelling template mapbox/storytelling#62

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for prefers-reduced-motion #8494

Support for prefers-reduced-motion #8494

arindam1993 commented Jul 16, 2019 •

edited

Loading

mourner left a comment

mourner Jul 17, 2019

CharlesBelov commented Jul 17, 2019 •

edited

Loading

arindam1993 commented Jul 18, 2019

andrewharvey commented Jul 18, 2019

mourner left a comment

mourner Jul 18, 2019

arindam1993 commented Jul 18, 2019

asheemmamoowala left a comment

asheemmamoowala Jul 18, 2019

arindam1993 commented Jul 18, 2019

arindam1993 commented Jul 18, 2019

CharlesBelov commented Jul 19, 2019

asheemmamoowala left a comment

asheemmamoowala Jul 19, 2019

dieterdreist commented Sep 4, 2019

andrewharvey commented Sep 5, 2019

dieterdreist commented Sep 7, 2019

andrewharvey commented Sep 8, 2019

CharlesBelov commented Sep 9, 2019

andrewharvey commented Sep 10, 2019

CharlesBelov commented Sep 25, 2019

		@@ -19,6 +19,8 @@ const cancel = window.cancelAnimationFrame \|\|

		let linkEl;

		let _reducedMotionQuery: MediaQueryList;

Support for prefers-reduced-motion #8494

Support for prefers-reduced-motion #8494

Conversation

arindam1993 commented Jul 16, 2019 • edited Loading

mourner left a comment

Choose a reason for hiding this comment

mourner Jul 17, 2019

Choose a reason for hiding this comment

CharlesBelov commented Jul 17, 2019 • edited Loading

arindam1993 commented Jul 18, 2019

andrewharvey commented Jul 18, 2019

mourner left a comment

Choose a reason for hiding this comment

mourner Jul 18, 2019

Choose a reason for hiding this comment

arindam1993 commented Jul 18, 2019

asheemmamoowala left a comment

Choose a reason for hiding this comment

asheemmamoowala Jul 18, 2019

Choose a reason for hiding this comment

arindam1993 commented Jul 18, 2019

arindam1993 commented Jul 18, 2019

CharlesBelov commented Jul 19, 2019

asheemmamoowala left a comment

Choose a reason for hiding this comment

asheemmamoowala Jul 19, 2019

Choose a reason for hiding this comment

dieterdreist commented Sep 4, 2019

andrewharvey commented Sep 5, 2019

dieterdreist commented Sep 7, 2019

andrewharvey commented Sep 8, 2019

CharlesBelov commented Sep 9, 2019

andrewharvey commented Sep 10, 2019

CharlesBelov commented Sep 25, 2019

arindam1993 commented Jul 16, 2019 •

edited

Loading

CharlesBelov commented Jul 17, 2019 •

edited

Loading