FortAwesome / react-fontawesome

Font Awesome React component
https://fontawesome.com
MIT License
3.67k stars 262 forks source link

"spin" animation doesn't work #526

Closed hrkw00 closed 1 year ago

hrkw00 commented 1 year ago

Describe the bug

I'm not sure if I'm missing something, but it seems "spin" props doesn't work.

https://fontawesome.com/v5/docs/web/use-with/react#animating-icons

I followed the above docs.

Reproducible test case

https://codesandbox.io/s/dreamy-mclaren-temr54

Expected behavior

animating spinner icon

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

hrkw00 commented 1 year ago

https://user-images.githubusercontent.com/38846793/193778256-9b3d7144-f3e1-4033-8e53-a047aff4622d.mov

I realized that it depends on an environment. An animation doesn't work on my main PC, but it works on another PC for some reasons.

Stryzhevskyi commented 1 year ago

@hrkw00, check this comment. It could be caused by enabled prefers-reduced-motion media query.

hrkw00 commented 1 year ago

Thank you @Stryzhevskyi !

window.matchMedia('(prefers-reduced-motion: reduce)').matches

true

I got the above result from my chrome console.

So I just changed my motion settings, and finally

window.matchMedia('(prefers-reduced-motion: reduce)').matches

false

got the above, and "spin" animation starts working!

maksam07 commented 11 months ago

@hrkw00 please open

window.matchMedia('(prefers-reduced-motion: reduce)').matches

always returns true

In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".

I've moved to the far left and far right positions. Rebooted the browser. But it didn't change anything - no animation.

Kubuntu 22.04 Google Chrome Version 117.0.5938.88 (Official Build) (64-bit)