Open niraj8 opened 4 years ago
Thanks @niraj8 .
You'd need to:
Here's the relevant success criterion, with more guidance.
The minimum you need to do is disable the animation within @media (prefers-reduced-motion) { ... }
.
For example:
.animation {
animation: <your animation as it currently is>
}
/* Remove or reduce the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
.animation {
animation-name: none;
}
}
‘Vestibular disorder’ is like car sickness, but triggered by motions on a screen that your brain does not expect. Even mild parallax effects can trigger that.
I’m mildly sensitive to ‘vestibular disorder’ triggers. I feel mildly car sick a little bit sick after looking at this for a few seconds. But other people really do feel quite sick when seeing animations like this. Here’s another example.
@media (prefers-reduced-motion) { ... }
Operating systems let users say that they prefer ‘reduced motion’. Then, it’s a website’s responsibility to honour that preference. (Here’s how Apple does it.)
I have ‘reduced motion’ toggled on my computer’s accessibility preferences. But those logos still animate.
Here's a good article summarising everything about prefers-reduced-motion. But there really isn't much to it. My pseudo-code example above says it all.
@jfhector Thank you for the write up! I really learned new thing about accessibility from it 😍 Also, I do feel a bit sick looking at that section as well.
Let's discuss how can we better showcase these logos on the homepage
I assume we still want every logo to be shown, what do you think about making it scroll horizontally instead of animating it? Or create a new page for this since there're tons of logo?
We have a good showcase page, a selection(~10) of logos should be good on the homepage What do you think?
That sounds good to me. Perhaps something like this?
And the logo will keep wrapping for responsive, it'll probably shown in one line for wide desktop.
I'm also thinking, since there's a showcase page already, how about removing the "USED BY FOLKS AT" section entirely?
I am in favour of keeping some logos on the homepage and adding a link to the showcase right below this section. I'll raise a pull with the layout in the your comment and let's see how it looks in the preview build.
Hey everyone, I created PR #879 based on @lukyth 's last comment. It behaves like this: Screencast from 10-21-2022 05:08:26 PM.webm
I am available for changes and/or fixes. Just let me know what you think
I saw your @xit4 PR but it is not ideal, the best would be to keep the animation for those who have the option activated and to put this display for those who do not have it.
The homepage showcases logos for companies that use styled-components in their websites with an animation
There are 70+ logos that run across the screen, below is a link to the original issue by @jfhector that explains why this is not ideal.
https://github.com/styled-components/styled-components/issues/3278
Let's discuss how can we better showcase these logos on the homepage