Stanko
commented
2 years ago Hey @walopee, that is a good point. I'll take a look this weekend.
For now you can add a simple workaround, by checking for (prefers-reduced-motion) using matchMedia:
Live demo: https://codesandbox.io/s/sleepy-panna-2ohhf1?file=/src/App.js
Code:
import { useState } from "react";
import AnimateHeight from "react-animate-height";
export default function App() {
const [height, setHeight] = useState("auto");
const reducedMotion = matchMedia("(prefers-reduced-motion)").matches;
return (
<div>
<button onClick={() => setHeight(height === 0 ? "auto" : 0)}>
Toggle
</button>
<AnimateHeight height={height} duration={reducedMotion ? 0 : 500}>
<div
style={{
padding: "50px 20px",
background: "#eee",
border: "1px solid #ddd",
marginTop: 20
}}
>
Hello World
</div>
</AnimateHeight>
</div>
);
}
Bdragon93
Expected behavior It would be nice to have the option to conditionally disable the animation for users who have their OS settings set to reduced or no animations
Your Environment
Additional context This would help fulfill an accessibility best practice by allowing users the option to avoid animations (https://www.w3.org/TR/WCAG21/#animation-from-interactions). I did just realize that this is also achievable by setting the duration to 0 when needed, though 😅