Animation

[gdoyle1]

There have been many product requests for animation to be included in the PF system over the past year. This epic will capture those requests and any ongoing (or completed) work that has come out of the UXD animation working group.

The thought is that each animation will be applied to a component and will be an opt-in modification that the consumer can decide to use.

We will need to determine animation guidelines in more depth, but the general ones of when to use animation are as follows:

1. Draw attention to something (If it is something that is critical, we’d use a stronger animation than something that is not)
2. Make a transition smoother

We will also need to determine a final style of animations, but what we have been using thus far is:

• Fast and snappy/smooth (keep this consistent with larger items, but smaller items will have more flexibility in style)

cc: @mcarrano @mceledonia

[jessiehuff]

Hey @mceledonia! 🙂 I'm curious if you've thought about the a11y considerations for these animations? I think, based on the working group doc, that most of your animations might fall under "motion animation" or "Animation from Interactions" that are under WCAG 2.3.3. I think the big thing to note is that we should probably have a reduced or no motion option for all users. In the above issue description, it states that this is opt-in, but I'm curious to what extent? Is it the product implementing the animations that gets this choice or the end user seeing the animation? We should make sure that we're respecting the reduced motion setting that users can have on their OS or use the media query prefers-reduced-motion to customize our animations based on user settings. This article explains the WCAG requirements more in depth, and this article explains the prefers-reduced-motion approach.