New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to reduce motion #5393

Merged
merged 5 commits into from Oct 16, 2017

Conversation

Projects
None yet
4 participants
@nolanlawson
Collaborator

nolanlawson commented Oct 14, 2017

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

screenshot 2017-10-14 10 18 27

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.

@nolanlawson nolanlawson requested a review from nightpool Oct 14, 2017

@ilianaw

This comment has been minimized.

Show comment
Hide comment
@ilianaw

ilianaw Oct 14, 2017

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 commented Oct 14, 2017

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 ilianaw referenced this pull request Oct 14, 2017

Closed

"Reduce UI motion" option #5355

2 of 2 tasks complete
@nightpool

This comment has been minimized.

Show comment
Hide comment
@nightpool

nightpool Oct 14, 2017

Collaborator
Collaborator

nightpool commented Oct 14, 2017

@nolanlawson

This comment has been minimized.

Show comment
Hide comment
@nolanlawson

nolanlawson Oct 14, 2017

Collaborator

@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.

Collaborator

nolanlawson commented Oct 14, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@nolanlawson

nolanlawson Oct 14, 2017

Collaborator

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. 😃

Collaborator

nolanlawson commented Oct 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@nolanlawson

nolanlawson Oct 14, 2017

Collaborator

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

Collaborator

nolanlawson commented Oct 14, 2017

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

@nolanlawson

This comment has been minimized.

Show comment
Hide comment
@nolanlawson

nolanlawson Oct 15, 2017

Collaborator

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.

Collaborator

nolanlawson commented Oct 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@nolanlawson

nolanlawson Oct 15, 2017

Collaborator

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

Collaborator

nolanlawson commented Oct 15, 2017

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

@nolanlawson

This comment has been minimized.

Show comment
Hide comment
@nolanlawson

nolanlawson Oct 15, 2017

Collaborator

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

Collaborator

nolanlawson commented Oct 15, 2017

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

@Gargron Gargron merged commit fa0be3f into tootsuite:master Oct 16, 2017

2 checks passed

codeclimate All good!
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

Gargron added a commit that referenced this pull request Oct 16, 2017

i18n ultim hour «More» dropdown title + reduce motion (#5415)
* Correction fem. form

* More dropdown title

* More dropdown title

* More dropdown title

* Add option to reduce motion (#5393)

zunda added a commit to zunda/mastodon that referenced this pull request Oct 16, 2017

ykzts added a commit to ykzts/mastodon that referenced this pull request Oct 17, 2017

zunda added a commit to zunda/mastodon that referenced this pull request Oct 17, 2017

Add option to reduce motion (tootsuite#5393)
* Add option to reduce motion

* Use HOC to wrap all Motion calls

* fix case-sensitive issue

* Avoid updating too frequently

* Get rid of unnecessary change to _simple_status.html.haml

Gargron added a commit that referenced this pull request Oct 17, 2017

Add Japanese translations (#5427)
* yarn manage:translations

* Add Japanese translation for #5410

* Add Japanese translation for #5393

cobodo pushed a commit to cobodo/mastodon that referenced this pull request Oct 20, 2017

Add option to reduce motion (tootsuite#5393)
* Add option to reduce motion

* Use HOC to wrap all Motion calls

* fix case-sensitive issue

* Avoid updating too frequently

* Get rid of unnecessary change to _simple_status.html.haml

cobodo pushed a commit to cobodo/mastodon that referenced this pull request Oct 20, 2017

i18n ultim hour «More» dropdown title + reduce motion (tootsuite#5415)
* Correction fem. form

* More dropdown title

* More dropdown title

* More dropdown title

* Add option to reduce motion (tootsuite#5393)

cobodo pushed a commit to cobodo/mastodon that referenced this pull request Oct 20, 2017

Add Japanese translations (tootsuite#5427)
* yarn manage:translations

* Add Japanese translation for tootsuite#5410

* Add Japanese translation for tootsuite#5393
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment