Beta: Allow users to Disable Animations?

Beta
#1

Hi!

Will there be a link provided that could disable animations for the current user session?

If we could have such link, we could add it to Accessibility options. This seems to be a low-hanging fruit for meeting WCAG 2 AAA standard for being able to disable non-essential animations on pages. Now that the scroll interactions are natively possible, it might be a good idea.

Thanks!

#2

@Misho,

There’s already some of this happening natively behind the scenes based off some things animate.css already had in their library:

@media print, (prefers-reduced-motion: reduce) {
  .x-effect-animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .x-effect-animated[class*='Out'] {
    opacity: 0;
  }
}

This should essentially kill the motion from these animated effects. I’d need to do a little bit of work to include all of our additional transform / filter / opacity stuff, but I think this is the best option rather than adding a button on the frontend as it just leans into system level preferences.

#3

Kory, sounds good. My logic was that if the website has animations, they should be seen normally by all users, except those who have problems with that. In that case, the WCAG rule says that they should be able to disable them (using front-end accessibility settings).

Not a pressing issues of course, but EU countries are adopting accessibility standards as well. Government and public websites are already under fire.

#4

Thanks Misho, sorry for the delay on this. We haven’t gotten anything in for the next beta in this regard but we’ll circle back to it.

#5

Hey, @Misho! After chatting this through with Alex some, we are going to ensure that the static styles mentioned above are kept in and that they encompass transitions / animations in general, and this by itself should cover things at a base level as it will obey a user’s system level settings. If something more involved is needed on a per-site basis (such as a user-facing button that disables / enables animations), that would need to be setup by the user as that starts getting into more custom territory. All that being said, the styles above should suit the needs you’re after by default without needing such a button at all.