prefers-reduced-motion

[nandi95]

Docs
I can see a couple components where this could be added to respect the user's browser preference:
Button,
Tooltip
Collapse/Accordion
Swap
Radio
Modal
Checkbox
Dropdown
Menu(statuses)

[saadeghi]

I think prefers-reduced-motion is for reducing the animated parts, not removing them. It's useful when there are a big moving parts or long animations and they may be annoying to the users.
Micro transitions like a button hover style or checkbox, etc... are so small and fast that wont be annoying to the users.

[danawoodman]

Current workaround that seems to work is to set this in my CSS file:

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		background-image: none !important;
	}
}

Then I set prefers-reduced-motion with Puppeteer (would be same with Playwright etc):

await page.emulateMediaFeatures([
  { name: "prefers-reduced-motion", value: "reduce" },
]);

[danawoodman]

I'm using puppeteer to open up a Histoire (like Storybook) story and do a visual screenshot diff using jest-image-snapshot, then compare to previous versions to prevent visual regressions. If I do not disable animations, the initial render of the component (and the associated animations, specifically of a .btn element) cause the screenshot to be very slightly off (<1% difference). My fix originally was to set a delay to let all animations settle but that slows down tests. What I did above actually resolves it, tho it would be still nice if Daisy did it out of the box, it's less of an issue for me now that I've found a workaround.

[saadeghi]

I see. So I guess the issue is only with btn which has an initial animation?

[danawoodman]

that's the only one i've noticed

[saadeghi]

@danawoodman Fixed in 4.11.1 🎉