Add option to reduce motion

[nolanlawson]

This is a partial fix of #5355. It adds a new option to reduce motion, which is disabled by default:

So far, this setting disables these animations:

• the favorite star spin animation
• the post privacy dropdown animation
• the search popout animation (which is similar to the post privacy animation)

Here's a before video and after video.

Open questions:

• Do we want this to apply to all animations everywhere? My feeling is no, since 1) it would be enormously complicated as there are dozens of animations in the UI, and 2) it might not even be helpful to people with vestibular disorders since apparently some animations are more harmful than others (e.g. zooming and parallax).
• Should we do a lightweight animation or no animation at all? Since I don't have vestibular disorder, I don't know whether it's preferable to remove the animation entirely, or to replace it with a simple linear fade or something similar. For now this PR just removes the animation entirely.
• Should the boolean be passed to components as a prop? I don't know Redux very well, but it seems odd to me that, for a global boolean option, we'd need to pass it in to components everywhere instead of just directly fetching it from the Redux store. If we just fetched it directly from the store, we could override react-motion's spring() everywhere. But I'm not an expert in React/Redux, so I just implemented it similarly to how autoPlayGif is implemented.

[ilianaw]

Hi! Thank you so much for this, and thanks for pointing to the "Responsive Design for Motion" blog post — it's helped me understand my own issues better :)

There is also a zoom animation when you select followers-only in the post privacy dropdown if your account is not locked to show the "anyone can follow you" disclaimer; I've not read the code closely enough to know if you've changed that too.

I also did not realize that there was a media query for a reduce motion option. I wonder if it's worth implementing that as well even though only Safari has support for it presently.

Do we want this to apply to all animations everywhere?

Probably not. As the resource you link describes, some animations trigger motion sickness; most of the examples replace motion with linear fades and those sort of feel fine to me.

Should we do a lightweight animation or no animation at all?

The "Don't Reduce Too Much" section in the WebKit resource makes sense to me; I think using a linear fade for the dropdowns is sufficient and may be better than no animation at all.

[ilianaw]

Hi! Thank you so much for this, and thanks for pointing to the "Responsive Design for Motion" blog post — it's helped me understand my own issues better :)

There is also a zoom animation when you select followers-only in the post privacy dropdown if your account is not locked to show the "anyone can follow you" disclaimer; I've not read the code closely enough to know if you've changed that too.

I also did not realize that there was a media query for a reduce motion option. I wonder if it's worth implementing that as well even though only Safari has support for it presently.

Do we want this to apply to all animations everywhere?

Probably not. As the resource you link describes, some animations trigger motion sickness; most of the examples replace motion with linear fades and those sort of feel fine to me.

Should we do a lightweight animation or no animation at all?

The "Don't Reduce Too Much" section in the WebKit resource makes sense to me; I think using a linear fade for the dropdowns is sufficient and may be better than no animation at all.

[nightpool]

Okay based on feedback I'm happy keeping this just to react motion stuff for now, focusing on zooms and parallax. We should also probably disable updating the timeline in real time but that's pretty difficult and out of scope for the PR Code wise, It would be much cleaner if we could apply this globally rather then everywhere we use react motion—there's a lot of potential for forgetting to include it or missing an edge case. I'm a fan of keeping it in the global store but also interested in what other people who touch this code more often think. This would be great to get even a barebones version of into 2.0

…

On Sat, Oct 14, 2017 at 2:22 PM iliana weller ***@***.***> wrote: Hi! Thank you so much for this, and thanks for pointing to the "Responsive Design for Motion" blog post — it's helped me understand my own issues better :) There is also a zoom animation when you select followers-only in the post privacy dropdown if your account is not locked to show the "anyone can follow you" disclaimer; I've not read the code closely enough to know if you've changed that too. I also did not realize that there was a media query for a reduce motion option. I wonder if it's worth implementing that as well even though only Safari has support for it presently. Do we want this to apply to all animations everywhere? Probably not. As the resource you link <https://webkit.org/blog/7551/responsive-design-for-motion/> describes, some animations trigger motion sickness; most of the examples replace motion with linear fades and those sort of feel fine to me. Should we do a lightweight animation or no animation at all? The "Don't Reduce Too Much" section in the WebKit resource makes sense to me; I think using a linear fade for the dropdowns is sufficient and may be better than no animation at all. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#5393 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAORVwdujnSSHQYHBcntBySvfkOkngsCks5ssPvggaJpZM4P5dpr> .

[nightpool]

Okay based on feedback I'm happy keeping this just to react motion stuff for now, focusing on zooms and parallax. We should also probably disable updating the timeline in real time but that's pretty difficult and out of scope for the PR Code wise, It would be much cleaner if we could apply this globally rather then everywhere we use react motion—there's a lot of potential for forgetting to include it or missing an edge case. I'm a fan of keeping it in the global store but also interested in what other people who touch this code more often think. This would be great to get even a barebones version of into 2.0

…

On Sat, Oct 14, 2017 at 2:22 PM iliana weller ***@***.***> wrote: Hi! Thank you so much for this, and thanks for pointing to the "Responsive Design for Motion" blog post — it's helped me understand my own issues better :) There is also a zoom animation when you select followers-only in the post privacy dropdown if your account is not locked to show the "anyone can follow you" disclaimer; I've not read the code closely enough to know if you've changed that too. I also did not realize that there was a media query for a reduce motion option. I wonder if it's worth implementing that as well even though only Safari has support for it presently. Do we want this to apply to all animations everywhere? Probably not. As the resource you link <https://webkit.org/blog/7551/responsive-design-for-motion/> describes, some animations trigger motion sickness; most of the examples replace motion with linear fades and those sort of feel fine to me. Should we do a lightweight animation or no animation at all? The "Don't Reduce Too Much" section in the WebKit resource makes sense to me; I think using a linear fade for the dropdowns is sufficient and may be better than no animation at all. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#5393 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAORVwdujnSSHQYHBcntBySvfkOkngsCks5ssPvggaJpZM4P5dpr> .

[nolanlawson]

@ilianaw OK I think I can rework this so it only does fades. Your explanation makes sense.

@nightpool Yeah we can maybe save CSS animations for a future PR, but for now it seems the ReactMotion ones are the worst offenders.

[nolanlawson]

@ilianaw OK I think I can rework this so it only does fades. Your explanation makes sense.

@nightpool Yeah we can maybe save CSS animations for a future PR, but for now it seems the ReactMotion ones are the worst offenders.

[nolanlawson]

OK, this new version solves a few problems at once:

1. Instead of having to pass around reduceMotion as a prop everywhere, just create a Higher Order Component around Motion and have it read from the Redux store
2. Because of this, we can just replace Motion everywhere it's used
3. Inside of the HOC, preserve opacity and backgroundOpacity animations but remove all other animations (e.g. x, rotate, scale, etc.)

I don't think this feature is perfect yet: some animations look a little slow (e.g. the favorite star) and some look a little sudden (e.g. the search drawer, since it has no animation at all), but conceptually this is much simpler because we can just apply it to all uses of Motion. And perhaps in the future we can pass some custom options to this new HOC to tell it what kinds of animations to do when reduce_motion is true.

Here's an updated before video and after video. Note that the "Followers-only" modal is covered now. 😃

[nolanlawson]

OK, this new version solves a few problems at once:

1. Instead of having to pass around reduceMotion as a prop everywhere, just create a Higher Order Component around Motion and have it read from the Redux store
2. Because of this, we can just replace Motion everywhere it's used
3. Inside of the HOC, preserve opacity and backgroundOpacity animations but remove all other animations (e.g. x, rotate, scale, etc.)

I don't think this feature is perfect yet: some animations look a little slow (e.g. the favorite star) and some look a little sudden (e.g. the search drawer, since it has no animation at all), but conceptually this is much simpler because we can just apply it to all uses of Motion. And perhaps in the future we can pass some custom options to this new HOC to tell it what kinds of animations to do when reduce_motion is true.

Here's an updated before video and after video. Note that the "Followers-only" modal is covered now. 😃

[nolanlawson]

Hmm it seems there may be a performance regression from adding the HOC. I'm going to investigate further.

[nolanlawson]

Hmm it seems there may be a performance regression from adding the HOC. I'm going to investigate further.

[nolanlawson]

Yeah so apparently this HOC pattern is clever, but causes a problem where every single Motion component is updated whenever the state updates... Reading about reselect to see if that can help out.

[nolanlawson]

Yeah so apparently this HOC pattern is clever, but causes a problem where every single Motion component is updated whenever the state updates... Reading about reselect to see if that can help out.

[nolanlawson]

OK, the performance issue appears to be fixed by avoiding recreating new objects in mapStateToProps. This PR is ready for review. 🙂

[nolanlawson]

OK, the performance issue appears to be fixed by avoiding recreating new objects in mapStateToProps. This PR is ready for review. 🙂

[nolanlawson]

This is live at https://malfunctioning.technology for testing.

[nolanlawson]

This is live at https://malfunctioning.technology for testing.

[nolanlawson]

I'm not sure if this change is actually required

[Gargron]

No, I don't think so. There are no animations in that component.

[nolanlawson]

OK, I'll remove it then.