search

patternfly / patternfly

This repo contains core (HTML/CSS) implementation for PatternFly. Issues related to CSS/HTML and layout should be filed here.
https://patternfly.org
MIT License
676 stars 95 forks source link

Introduce animated transitions to select components #4979

Open mcarrano opened 1 year ago

mcarrano commented 1 year ago

Figure out how we will handle the media query (all over the place or a global media query)

Want to introduce animated transition effects to selected components to improve the user experience when working with PatternFly. This is a follow-up to design recommendations summarized in https://github.com/patternfly/patternfly-design/issues/978 From this epic, we want to address a subset of components as listed below:

cc @mceledonia @mcoker

garrett commented 1 year ago

While animations are useful to show that something that's new, didn't just suddenly pop into existence, or immediately teleport from one place to another, some people are negatively impacted by overactive animations.

Please make sure animation is either subtle (such as gradual fading colors) and/or has ways to turn it off (respecting prefers-reduced-motion, which is usually set by the OS).

Recent article on the subject of animations on the web by someone who is negatively affected by animation: https://www.theverge.com/23191768/animation-accessibility-neurodivergence

(FWIW: I'm happy that animations are being added :tada:, especially to highlight newly created content. But it's like salt on food: Adding a bit is good, but adding a lot can be way too much for some people.)

tlabaj commented 1 year ago

@garrett I want to advocate for the same in order to support accessibility and inclusivity. I would advocate that we at least support prefers-reduced-motion if not a way to turn animations off completely.

A good reference: Web accessibility for seizures

garrett commented 1 year ago

Is PatternFly using "the space hack" to control variables yet?

https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/?

It would simplify a lot of things, such as having to do a bunch of media queries all over the place to enable/disable animations.

The gist is:

/* ON and OFF are set so the rest of the code is legible. There should probably
 * be a comment about how initial and the space are actually valid and
 * intentional here. This could, would, and should be used for other toggles,
 * not just for animation. */
:root {
  --ON: initial;
  --OFF: ;
}

/* Set the default */
:root {
  --can-i-haz-animation-plz: var(--ON);
}

/* Media query toggles the setting off */
@media (prefers-reduced-motion) {
  :root {
    --can-i-haz-animation-plz: var(--OFF);
  }
}

/* Animation is mostly normal, but uses var() as a wrapper with the variable so
 * it's only used when animation is turned on. */
.something {
  animation: var(--can-i-haz-animation-plz, 3s infinite alternate slidein);
}

/* Keyframes would be untouched. */
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

This would mean that there's just one place to have the @media query for prefers-reduced-motion and the check can be done via CSS custom property where the animation is specified (wrapping it in the var with the variable).

It's more concise and it's a good bit easier to write than having media queries for animations or for keyframes.

It's also a technique that could be used for other things as well, such as breakpoints overriding for documents within iframes (with navigation outside, such as Cockpit has it) @ https://github.com/patternfly/patternfly/issues/4511 & https://github.com/patternfly/patternfly/pull/5076 (instead of having to use SASS) and could be used for dark mode too, as well as anything that's a toggle.

srambach commented 1 year ago

Here are some [best practices for animation] including a plan for handling the media query, accessibility concerns, and performance considerations. (https://docs.google.com/document/d/1U_wEEKLGznFe1HR6zEJbTrx3-j2bA0jj-I7GWihifpU/edit?usp=sharing)

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.