Skip to content

Remove animations from various places for users with prefer-reduced-motion #3972

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.

Sign up for GitHub

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

Merged
canova merged 1 commit into from
Apr 5, 2022
Merged

Remove animations from various places for users with prefer-reduced-motion #3972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/components/app/Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,15 +165,18 @@
position: relative;
}

.homeTransition-enter {
opacity: 0.1;
transform: translateX(100px);
}
/* Only show the home transition when reduced motion is not preferred */
@media (prefers-reduced-motion: no-preference) {
Comment thread
canova marked this conversation as resolved.
.homeTransition-enter {
opacity: 0.1;
transform: translateX(100px);
}

.homeTransition-enter.homeTransition-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms ease-out, transform 300ms ease-out;
.homeTransition-enter.homeTransition-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms ease-out, transform 300ms ease-out;
}
}

.homeSectionUploadFromFileInput {
Expand Down
7 changes: 7 additions & 0 deletions src/components/app/MenuButtons/Publish.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,10 @@
.menuButtonsPublishError {
margin: 10px 0;
}

/* Do not animate the publish animation for stripes at the top loading bar. */
@media (prefers-reduced-motion) {
.menuButtonsPublishUploadBarInner {
animation: none;

@julienw julienw Apr 4, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional: in general I think I'd rather have @media (prefers-reduced-motion: no-preference) that adds the animation instead of @media (prefers-reduced-motion) { removing it. I think it makes it easier to maintain in the longer term, reducing the risk of typos.

@canova canova Apr 5, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I was adding them, I wanted to follow this logic:

  1. If a CSS class is added for solely that animation/transition, then wrap that class with @media (prefers-reduced-motion: no-preference)
  2. If a CSS class is not added for that animation and includes other properties, I added @media (prefers-reduced-motion) to reset the animations.

I think 2nd item makes it cleaner, but happy to discuss for a follow-up if you want.

@julienw julienw Apr 5, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use the same class both in @media and outside @media, I think it's OK to specify the same class twice (actually you're doing it with the solution 2 as well!), and on the long run it will be easier to maintain.
For example, if we change the class name in the future, it's easy to forget to update the "negative" @media query (that is, one that removes the animation) because most of us don't use the app with prefers-reduced-motion on. However with the "positive" @media query it's easier to see that the animation is missing when not using prefers-reduced-motion.

Here is my rationale :-)

}
}
13 changes: 13 additions & 0 deletions src/components/app/ProfileRootMessage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.rootMessageContainer {
position: absolute;
top: 0;
Expand Down Expand Up @@ -165,3 +169,12 @@
transform: translateX(-100px);
}
}

/* Do not animate the loading animation when user prefers reduced motion. The
* other alternative was to remove these boxes completely, but it's still nice
* to keep the boxes as a nice visualization. */
@media (prefers-reduced-motion) {
.loading-div {
animation: none;
}
}
14 changes: 14 additions & 0 deletions src/components/app/ProfileViewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@keyframes profileViewerFadeIn {
0% {
opacity: 0;
Expand Down Expand Up @@ -114,3 +118,13 @@
.profileViewerSpacer {
flex: 1;
}

/* Do no animate the whole profile viewer during loading and publishing if user
* prefers reduced motion. */
@media (prefers-reduced-motion) {
.profileViewer,
.profileViewerFadeOut,
.profileViewerFadeInSanitized {
animation: none;
}
}
8 changes: 8 additions & 0 deletions src/components/shared/FilterNavigatorBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,11 @@
opacity: 0;
transform: translateX(50%);
}

/* Do not animate the filter navigator bar items when user prefers reduced motion */
@media (prefers-reduced-motion) {
.filterNavigatorBarItem {
animation: none;
transition: none;
}
}