It stoped working in latest Chrome and Firefox #928

martinlombana · 2019-04-24T16:29:06Z

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 · 2019-04-24T17:53:35Z

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:

How can I set prefers-reduced-motion in Chrome? I don't find the option anywhere. So weird.
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 · 2019-04-24T22:55:54Z

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 · 2019-04-24T22:59:05Z

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 · 2019-04-25T12:03:12Z

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) :

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

Best Regards

martinlombana · 2019-04-25T13:15:13Z

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 · 2019-04-25T13:52:16Z

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 · 2019-04-25T16:47:08Z

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 · 2019-04-25T17:57:14Z

@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 · 2019-05-01T16:35:53Z

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 · 2019-05-08T08:41:29Z

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 · 2019-05-09T18:42:41Z

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 · 2019-05-09T19:24:36Z

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 · 2019-05-10T09:36:59Z

@marlon-tucker found the right reason. #932

yellow1912 · 2019-05-16T04:22:12Z

This is a breaking issue, it causes the animation to stop working, elements to stop appearing and such. Can a fix for this be pushed ASAP? It's just a very minor change to the current rule.

toviszsolt · 2019-05-16T10:22:15Z

Solution committed, we are waiting for merge it to a release. You can check in pull requests...

toviszsolt · 2019-05-16T12:01:48Z

Temporary solution until new release published:

Test: https://codepen.io/badboy/full/eavwRg

rendy44 · 2019-05-18T09:53:54Z

@sivot Does not work either on Chrome 74 windows.

toviszsolt · 2019-05-18T10:00:20Z

@rendy44 what does not work? Show me your sample page or code. If animation not playing in linked codepen, then you need to enable animations in Windows.

toviszsolt · 2019-05-18T10:05:11Z

It's okay, if animations don't playing in only cases below:

On OSX or IOS reduced motion option turned ON in OS level
On Windows Show animations in Windows turned OFF in OS level

In any other cases the animations need to playing...

Change Reduce Motion Settings:

OSX: Settings > General > Accessibility > Reduce Motion
IOS: System Preferences > Accessibility > Display > Reduce Motion
Windows: Settings > Ease of Access > Show animations in Windows

batata004 · 2019-05-21T17:13:24Z

Just today I found out this thread. I spent the last 3 days trying to fix this in a very complex add. I made very simple test cases and found out that animate.css by itselft is causing this problem.

The problem is that I use animate.css in hunderds of websites importing it from CDN. All those websites are broken right now. I think animate.css should make this prefers-reduced-motion optional and NOT default. The default should be: ANIMATE - this is actually the name of the library. If the user wants to respect prefers-reduced-motion it should make the user set that explicitly!

Any idea if this stuff will be corrected and removed as default?

warengonzaga · 2019-05-21T19:56:14Z

Just today I found out this thread. I spent the last 3 days trying to fix this in a very complex add. I made very simple test cases and found out that animate.css by itselft is causing this problem.

The problem is that I use animate.css in hunderds of websites importing it from CDN. All those websites are broken right now. I think animate.css should make this prefers-reduced-motion optional and NOT default. The default should be: ANIMATE - this is actually the name of the library. If the user wants to respect prefers-reduced-motion it should make the user set that explicitly!

Any idea if this stuff will be corrected and removed as default?

Hello, I already recommend it and we are working on updates... here's my reply and suggestion about his issue.

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?

@eltonmesquita is working on updates...

batata004 · 2019-05-21T20:04:09Z

Thanks! :) You said @eltonmesquita is "working"? The "work" is only to remove that prefers-reduced-motion from the css file OR set prefers-reduced-motion with a value - I disagree with the guy that said that this problem is not a bug - I think it is. The bug is that the animate.css file only makes use of prefers-reduced-motion without any parameter (as it should have done).

warengonzaga · 2019-05-24T03:57:51Z

@batata004 @eltonmesquita working on updates... which means not only that issue but all issues in this repo... also adding new features... that's why he is working on updates together with bug fixes ;) please be patient.

Buxey · 2019-05-24T10:38:04Z

It's okay, if animations don't playing in only cases below:

On OSX or IOS reduced motion option turned ON in OS level

On Windows Show animations in Windows turned OFF in OS level

In any other cases the animations need to playing...

Change Reduce Motion Settings:

OSX: Settings > General > Accessibility > Reduce Motion

IOS: System Preferences > Accessibility > Display > Reduce Motion

Windows: Settings > Ease of Access > Show animations in Windows

Thanks this worked!

eltonmesquita · 2019-05-29T02:34:39Z

A new version was release with the fix on #931. Now things should work better.

warengonzaga · 2019-05-29T17:34:43Z

A new version was release with the fix on #931. Now things should work better.

See guys? I said earlier that @eltonmesquita is working on the new version with this fix... hehe

professorx00 · 2019-07-18T12:13:12Z

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) :

Press Win+R to open the Run dialog.

Type in sysdm.cpl and press enter to launch windows settings pannel

In the dialog windows that opens, click the Advanced tab.

Choose Custom and then checked 'Fade or Slide ToolTips in view'

Best Regards

Thanks so Much this solved my Issue.

FredyWenger · 2020-01-10T12:34:02Z

I had the problem (no animation) in google chrome some time ago, as animation in the windows settings were deactivated (and google - for whatever not to comprehend! reason - take care about .
Activated - worked again
Since yesterday - animations again don't have worked again
I first though, the windows animations were deactivated again in Windows (as I had a loved win update and you know MS...)
But this was nit the case (and other websites animations sill have worked)
Thanks a posting here, I have deactivated:
@media (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } }
(last code lines in my animate.css) and it seems to work again (and hopefully forever :-)

toviszsolt · 2020-01-10T15:57:00Z

@FredyWenger sorry man but look like you don't understand this "reduce motion" concept.
IF USER TURN OFF ANIMATIONS ON OPERATION SYSTEM LEVEL THE USER NOT WANTS ANIMATIONS! DOT! THIS IS SUPER EASY FACT...
The problem is: if motion reduced in OS level you need to play all animations with ZERO time otherwise functions (that uses animations) will be crashed. Now all animations playing with zero time. This solution is working on all platform on all major browsers (Safari, Chrome, Firefox, Edge).
The UNSET method is not working (now and forever).

Helpful information for you:
https://developer.paciellogroup.com/blog/2019/05/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/

warengonzaga · 2020-01-10T16:39:17Z

@sivot alright, thanks for the awesome reference!

clinville2003 · 2020-01-24T16:20:46Z

I'm on Windows 10, Chrome 79. I was experiencing no animation (after it had worked), while others in the office, who are also on Chrome 79 and Windows 10, would get animation. I typed Ease Of Access Display Settings in the menu. My "Show animations in Windows" was on but I turned it off and back on. That seemed to trip some other setting. Now it works.

rozhdestvenskiy · 2020-04-04T03:07:27Z

Folks,

I'm using Win 7 and Chrome 80.x. I've always selected "Adjust for best performance" setting which unchecked all checkboxes on Visual Effects tab. I just tried to enable only "Fade or slide ToolTips in view" and it didn't work. I checked it here - https://codepen.io/badboy/full/eavwRg. I played with options and currently I have only one option enabled which is the very first one "Animate controls and elements inside windows" and I can confirm that animation (https://daneden.github.io/animate.css/ and https://codepen.io/badboy/full/eavwRg) works fine!

dziku86 · 2021-04-09T21:58:21Z

@rozhdestvenskiy

Folks,

I'm using Win 7 and Chrome 80.x. I've always selected "Adjust for best performance" setting which unchecked all checkboxes on Visual Effects tab. I just tried to enable only "Fade or slide ToolTips in view" and it didn't work. I checked it here - https://codepen.io/badboy/full/eavwRg. I played with options and currently I have only one option enabled which is the very first one "Animate controls and elements inside windows" and I can confirm that animation (https://daneden.github.io/animate.css/ and https://codepen.io/badboy/full/eavwRg) works fine!

I filed a bug with this one https://bugs.chromium.org/p/chromium/issues/detail?id=1197680

warengonzaga mentioned this issue May 9, 2019

Really choppy animations in Chrome iOS #934

Closed

toviszsolt mentioned this issue May 11, 2019

Reduced-Motion: Replace animation: unset and transition: none with 0-length durations. #931

Merged

eltonmesquita mentioned this issue May 14, 2019

[Chrome 74] @media(prefers-reduced-motion) rule #932

Closed

neox387 mentioned this issue May 18, 2019

Cleanup piejanssens/premiumizer#189

Merged

batata004 mentioned this issue May 21, 2019

Bug with animate on latest firefox (even the last 2 major version of firefox) #898

Closed

eltonmesquita closed this as completed May 29, 2019

wapcrazut mentioned this issue Jan 3, 2020

Animations not working in Firefox 71.0 #1001

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

It stoped working in latest Chrome and Firefox #928

It stoped working in latest Chrome and Firefox #928

martinlombana commented Apr 24, 2019

martinlombana commented Apr 24, 2019

eltonmesquita commented Apr 24, 2019

martinlombana commented Apr 24, 2019 via email •

edited

Benoit75 commented Apr 25, 2019 •

edited

martinlombana commented Apr 25, 2019 via email •

edited

marlon-tucker commented Apr 25, 2019 •

edited

eltonmesquita commented Apr 25, 2019

martinlombana commented Apr 25, 2019

warengonzaga commented May 1, 2019

shpuld commented May 8, 2019

XEQTIONR commented May 9, 2019 •

edited

XEQTIONR commented May 9, 2019

toviszsolt commented May 10, 2019

yellow1912 commented May 16, 2019

toviszsolt commented May 16, 2019

toviszsolt commented May 16, 2019 •

edited

rendy44 commented May 18, 2019

toviszsolt commented May 18, 2019

toviszsolt commented May 18, 2019

batata004 commented May 21, 2019

warengonzaga commented May 21, 2019

batata004 commented May 21, 2019 •

edited

warengonzaga commented May 24, 2019

Buxey commented May 24, 2019

In any other cases the animations need to playing...

eltonmesquita commented May 29, 2019

warengonzaga commented May 29, 2019

professorx00 commented Jul 18, 2019

FredyWenger commented Jan 10, 2020

toviszsolt commented Jan 10, 2020 •

edited

warengonzaga commented Jan 10, 2020

clinville2003 commented Jan 24, 2020

rozhdestvenskiy commented Apr 4, 2020

dziku86 commented Apr 9, 2021

It stoped working in latest Chrome and Firefox #928

It stoped working in latest Chrome and Firefox #928

Comments

martinlombana commented Apr 24, 2019

martinlombana commented Apr 24, 2019

eltonmesquita commented Apr 24, 2019

martinlombana commented Apr 24, 2019 via email • edited

Benoit75 commented Apr 25, 2019 • edited

martinlombana commented Apr 25, 2019 via email • edited

marlon-tucker commented Apr 25, 2019 • edited

eltonmesquita commented Apr 25, 2019

martinlombana commented Apr 25, 2019

warengonzaga commented May 1, 2019

shpuld commented May 8, 2019

XEQTIONR commented May 9, 2019 • edited

XEQTIONR commented May 9, 2019

toviszsolt commented May 10, 2019

yellow1912 commented May 16, 2019

toviszsolt commented May 16, 2019

toviszsolt commented May 16, 2019 • edited

rendy44 commented May 18, 2019

toviszsolt commented May 18, 2019

toviszsolt commented May 18, 2019

In any other cases the animations need to playing...

batata004 commented May 21, 2019

warengonzaga commented May 21, 2019

batata004 commented May 21, 2019 • edited

warengonzaga commented May 24, 2019

Buxey commented May 24, 2019

In any other cases the animations need to playing...

eltonmesquita commented May 29, 2019

warengonzaga commented May 29, 2019

professorx00 commented Jul 18, 2019

FredyWenger commented Jan 10, 2020

toviszsolt commented Jan 10, 2020 • edited

warengonzaga commented Jan 10, 2020

clinville2003 commented Jan 24, 2020

rozhdestvenskiy commented Apr 4, 2020

dziku86 commented Apr 9, 2021

martinlombana commented Apr 24, 2019 via email •

edited

Benoit75 commented Apr 25, 2019 •

edited

martinlombana commented Apr 25, 2019 via email •

edited

marlon-tucker commented Apr 25, 2019 •

edited

XEQTIONR commented May 9, 2019 •

edited

toviszsolt commented May 16, 2019 •

edited

batata004 commented May 21, 2019 •

edited

toviszsolt commented Jan 10, 2020 •

edited