🍆
Framer Motionを使っているパッケージではアニメーションが効かないことがある【Windowsアニメーション効果OFF時】
Windowsには上記のように「アニメーション効果」をOFFにする機能があります。これはウィンドウを立ち上げたり、タスクバーに格納されるときの邪魔なアニメーションを無効にする設定です。
ありがた迷惑 親切にもこの「アニメーション効果」の設定がアクセシビリティの観点からNext.jsおよびReactのパッケージで設定を継承してくれているものも存在しています。
例えば、react-modal-sheet がその一例です。
※Framer Motionを使っていなくても同様の仕様になっているケースがあります。例えば react-spring-bottom-sheetがその一例です。
パソコンだとアニメーションが動かず、スマホ実機だとアニメーションが動くという現象に悩まされておりましたが、どうやら「アニメーション効果」がOFFになっていることが原因であることが分かりました。
アニメーションが効かなくておかしいな？と思ったときはご自身のパソコンの設定を確認してみると問題が解決するかもしれません。
Discussion