feat: disable animated transitions by default when `prefers-reduced-motion: reduce`

[Mysterious-Dev]

Linked to https://github.com/facebook/docusaurus/issues/8506.

[netlify[bot]]

✅ Deploy Preview for infima ready!

Name	Link
🔨 Latest commit	24af02dca7c87815eb519d2ba5af0b016d0c0803
🔍 Latest deploy log	https://app.netlify.com/sites/infima/deploys/63ef5df592c1ec0008aee399
😎 Deploy Preview	https://deploy-preview-281--infima.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Mysterious-Dev]

Ready for review. For infima, it's what I can done. As far as the mobile version of the TOC is concerned, this is normally done on the Docusaurus side.

[slorber]

Thanks, will review it soon.

Was wondering if maybe we could use this CSS var trick to reduce motion everywhere at once? https://www.silvestar.codes/articles/using-css-variables-for-reduced-motion-on-a-global-scale/

:root {
--ifm-transition-fast: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ifm-transition-fast: 0ms;
  }
}

I didn't try nor study that solution in depth but that's probably worth exploring so that we avoid spreading the mediaqueries everywhere.

[Mysterious-Dev]

Hmm, intresting, I will try this ^^.

[Mysterious-Dev]

By the way, can I add somes new variables for this ? Because in css, I have different speeds for some transitions.

Or maybe homogenise it.

[slorber]

I don't know, if this makes sense we can create "design tokens" for speeds 🤪 I don't know how many different anim speeds we have

[Mysterious-Dev]

For modified files, I have 2 different speeds for navbar (one at 250ms and the other to 100ms).

And for dropdown, I have a transition without "speed".

https://github.com/facebookincubator/infima/pull/281/files#diff-6493c596df83dbd8bfba5fc03177ce703353a1669a5e0a89d32266832255c8ddR59

https://github.com/facebookincubator/infima/pull/281/files#diff-9e6f27542a279ed36f85e384f024d2b131d4d207208eecb8711f99b0800c8a74R218-R223 https://github.com/facebookincubator/infima/pull/281/files#diff-9e6f27542a279ed36f85e384f024d2b131d4d207208eecb8711f99b0800c8a74R218-R223

[Mysterious-Dev]

Any news ?

[slorber]

will be integrated in https://github.com/facebook/docusaurus/pull/8674

[Mysterious-Dev]

Nice ! However, the animation visible on the video below is managed by Docusaurus (with the willChange attribute etc...). I'm not sure how to support the media query 😅.

https://user-images.githubusercontent.com/40738104/219637116-147bc2ce-2a53-4962-aa44-18c9a6e6677e.mp4

[slorber]

Yes, I added a few fixes on the Docusaurus side as well to handle that

[Mysterious-Dev]

Perfect, thanks ^^.