KPC
Kevin Powell - Community•2mo ago
aidan amoongus

Prefers Reduced Motion

Hi, I was looking into ways for my site to support reduced motion people, like a good dev should 🙂 I found 2 solutions which I think are quite identical, but I'm not sure if there are any differences. I'd like to see what other people think. 
:root {
  --motionOK: 1;
  --transition-timing: 315ms;
}
@media(prefers-reduced-motion: reduce) {
  :root {
    --motionOK: 0;
  }
}

.foo {
  transition: all calc(var(--transition-timing) * var(--motionOK));
}
.foo:hover {
  scale: 1.2;
}
:root {
  --motionOK: 1;
  --transition-timing: 315ms;
}
@media(prefers-reduced-motion: reduce) {
  :root {
    --motionOK: 0;
  }
}

.foo {
  transition: all calc(var(--transition-timing) * var(--motionOK));
}
.foo:hover {
  scale: 1.2;
}
other example: 
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}
8 Replies
Jochem
Jochem•2mo ago
the first option would let you exclude certain animations if you wanted to I'd personally go for the latter, because it makes it impossible to forget animations, where multiplying by motionOK means you could accidentally skip ones but the first would give you more control
ἔρως
ἔρως•2mo ago
do not do transition: all, please for the 2nd one, i wouldnt force the animation to be none if you have something that relies on animation events, then that will break instead, force the time to be 10ms or something super short this doesn't exclude you from doing testing and validating that there arent animations that create more issues for example, an animation of something spinning that now spins so fast it causes flashing on the screen, which can trigger a seizure if you can't avoid some animations, like a spinner, increase the time to something like 10x the animation/transition time so, there is motion, but it's 10x slower
aidan amoongus
aidan amoongusOP•2mo ago
could you put an massively large number to delay the animation? yeah it was just for like the demo, i wouldnt actually do it
ἔρως
ἔρως•2mo ago
yes, but it should be a per-animation analysis
aidan amoongus
aidan amoongusOP•2mo ago
ok
ἔρως
ἔρως•2mo ago
there's no single solution, but the majority you can just follow what i said you can even add utility classes to speed up to 10ms or slow down to 5s the animation (for example) if you use scss, you don't even need to add those classes in the html
aidan amoongus
aidan amoongusOP•2mo ago
alr thanks for the help!
ἔρως
ἔρως•2mo ago
you're welcome

Did you find this page helpful?