It stoped working in latest Chrome and Firefox

[martinlombana]

This is a bit confusing, but even your website, when you click "Animate" stopped working for latest chrome and firefox.

It does work in Edge, though. Any idea why?

I noticed it in a project, that all animations stopped working, and decided to theck your own website. Pretty weird this is test with chrome ( I am clicking the button).

[martinlombana]

I found the issue.

reduced-motion, something that as a web-developer I never activated, if not set, get's picked up as set.

If you remove this last part in animate.css:

@media (print), (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } }

Everything works again.

Now, the questions that arises is:

1. How can I set prefers-reduced-motion in Chrome? I don't find the option anywhere. So weird.

2. Probably the mods that you introduced, @daneden, although supossed to work, should be apart, or set up in another way. Because it seems that it causes problems and not all devices pick that up correctly.

For debuggin info, @daneden, I tested on Vanilla:

Google Chrome is up to date: Version 74.0.3729.108 (Official Build) (64-bit)

And vanilla:

Firefox 66.0.3 (64-bit)

And I confirm that it does not work, because of that media query.

[eltonmesquita]

Hello.
Chrome and Firefox on Windows set this configuration based on Windows configurations itself. If you choose reduced animations on Windows configuration than the browsers will match the media query and disable the animations.

Unfortunately this is a bit confusing right now as it's not clear to everyone that this is an OS config. I might add this to the read me to clarify things.

[martinlombana]

Yep. Because most people, like me, never touched that setting. And id animations stop working, it might lead to crazyness 😉. Maybe make those lines optional and not included by default? Best,

[Benoit75]

Hello,
Thank's for your all your work (@daneden and bug hunter @martinlombana & @eltonmesquita) : this bug drive me crazy this morning !!!

For those who would like to reactivate this setting (before a hopfully new release of animate) :

1. Press Win+R to open the Run dialog.
2. Type in sysdm.cpl and press enter to launch windows settings pannel
3. In the dialog windows that opens, click the Advanced tab.
4. Choose Custom and then checked 'Fade or Slide ToolTips in view'

Best Regards

[martinlombana]

Good tip, But that would just work for you. Other users might be in our situation, therefore not having animations on their system when they actually want them... 🙂

[marlon-tucker]

Hello,

According to this google developer page https://developers.google.com/web/updates/2019/03/prefers-reduced-motion the media query has an additional parameter, either reduce or no-preference.

However, the media query which animate.css is using does not have a check for this parameter, and so I believe the rules are being applied regardless, even though I suspect in most instances it will be set to no-preference.

https://github.com/daneden/animate.css/blob/0ca8f2dc7c74c9e76b93bc378dad8b1cc1590dad/source/_base.css#L46-L51

[eltonmesquita]

Just to make it clear, this is not a bug. It's the way the browser's implementation works. It's something that developers should be aware when using animate.css or any animation in a browser.

Safari's implementation is based on the browser's configuration, not in a system wide implementation, for instance.

@marlon-tucker, thanks for the reference. I'll have a look at the link and see if what's the best way to implement the feature.

[martinlombana]

@eltonmesquita not a "bug" per se, but maybe not something that is forced, out of the box in an animation framework. Don't you agree?

[warengonzaga]

Hello everyone, I remember someone is requesting this feature to be an option for the developer who uses animate.css and makes it default to NO. I can't find that issue here so I refer here that issue. @eltonmesquita is it a good idea to make this feature an optional? and make it default as no?

[shpuld]

Wouldn't it be a better idea to use animation-duration: 0s; and transition-duration: 0s; to remove animations instead of forcing animations to unset and transitions to none, which actually breaks websites? In our case we rely on animations for a sliding menu which completely broke with the Chrome 74 update thanks to this, while with duration 0's it would still work just without any animation.

[XEQTIONR]

Thanks so much for this. I'm close to finishing a project and suddenly, all (or most) animations broke after a web-pack re-build. Took me a while to figure out what had caused the problem. Didn't expect animate.css to break since it's rather a simple framework. But very annoying. I'm having to use a custom version of the CSS file (with that part commented out). Can anyone please post a PROPER way to toggle this option. And I don't mean, just turn it off on my browser.

[XEQTIONR]

Now I'm thinking that it wasn't because of the web-pack build. Because I checked and that section of the code was always there. It must be automatic chrome update.

[toviszsolt]

@marlon-tucker found the right reason. #932