# Toggling All Animations On and Off **URL:** \ **Category:** programming\ **Created:** [November 11, 2018, 6:39pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954 "2018-11-11T18:39:10Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 11, 2018, 6:39pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/1 "2018-11-11T18:39:10Z")
As a user preference and to help with accessibility scenarios, providing a way to toggle all animations on and off is a good thing. * * * This is a companion discussion topic for the original entry at [https://www.kirupa.com/html5/toggling\_animations\_on\_off.htm](https://www.kirupa.com/html5/toggling_animations_on_off.htm) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 21, 2018, 1:42am UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/4 "2018-11-21T01:42:07Z")
If you have any questions about the contents of this tutorial, just reply here 🙂 ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [November 21, 2018, 3:47pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/5 "2018-11-21T15:47:50Z")
I found your article to be informative and interesting. However, I have several points I want to make. 1. The animation you are illustrating does not work in the latest version of MicroSoft Edge (Microsoft Edge 42.17134.1.0). 2. Looking at this article in the latest version of Chrome (or FireFox for that matter), I did not see the words _OS prefers reducing animation!_ when toggling the animation off. 3. In your code for animate(), the following check is shorter, if (/^\s?/.test(toggleValue)) and accomplishes the same thing. (For those who are not proficient in regular expressions, this checks for 0 or 1 white spaces at the beginning of _ **toggleValue** _). I am really a big fan of using regular expressions with the “test()” function. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 22, 2018, 2:03am UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/7 "2018-11-22T02:03:21Z")
Good points! 1. I’ll double-check why Edge has difficulties playing the animation. 2. What OS are you on? Platform support is really spotty for it. 3. Regular expressions are really powerful…and very confusing for your typical user. That’s why I usually don’t use them in tutorials. 🙂 ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [November 22, 2018, 2:29pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/8 "2018-11-22T14:29:32Z")
My OS is Windows 10. I realized after I posted and looked at the code that that may be why the reason " _OS prefers reducing animation!_ wasn’t being shown. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 23, 2018, 4:08am UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/9 "2018-11-23T04:08:04Z")
Strange! Doing a web search confirms what you have noticed about it not being supported ☚ ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [November 23, 2018, 1:26pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/10 "2018-11-23T13:26:33Z")
If I may ask, what browser and OS do you typically use? Also, have you managed to track down why Microsoft Edge is not showing the animation? ---
**Author:** ![Youth\_Overturn](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/youth_overturn/32/9363_2.png) [@Youth\_Overturn](https://forum.kirupa.com/u/Youth_Overturn)\ **Post date:** [November 23, 2018, 3:56pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/11 "2018-11-23T15:56:01Z")
a code pen demo [https://codepen.io/qcgm1978/pen/rQdKvm](https://codepen.io/qcgm1978/pen/rQdKvm) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 23, 2018, 4:19pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/12 "2018-11-23T16:19:58Z")
I mostly use Mac/Chrome, but I do check on Edge prior to publishing to make sure everything works (via [browserstack](https://twitter.com/kirupa/status/1066034499253751808)). I haven’t been able to track down the issue yet, but it is high on my things to do once I get back on my Windows setup in a day or so 🙂 ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 23, 2018, 6:15pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/13 "2018-11-23T18:15:19Z")
I found out what is wrong with Edge. It doesn’t seem to support `calc` values for a duration whereas all other browsers do. Here is a fiddle someone created: **[http://jsfiddle.net/p243bk8g/1/](http://jsfiddle.net/p243bk8g/1/)** I’ll reach out to my former team and let them and see if it can be fixed in an upcoming release! ---
**Author:** ![VaiFanatic](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaifanatic/32/7159_2.png) [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)\ **Post date:** [November 23, 2018, 6:47pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/14 "2018-11-23T18:47:03Z")
That Edge… always a step behind. It’s taking after its now deceased sibling, IE. ---
**Author:** ![Jakob\_E](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jakob_e/32/9377_2.png) [@Jakob\_E](https://forum.kirupa.com/u/Jakob_E)\ **Post date:** [November 24, 2018, 9:37am UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/15 "2018-11-24T09:37:33Z")
Thanks for sharing 🙂 In regards to CSS animation how about using `animation-play-state: var(--play-state, running)` – then when you toggle to paused the animation won’t jump to the start ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 24, 2018, 7:43pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/16 "2018-11-24T19:43:15Z")
@Jakob_E - Thanks! I updated the article and code to use your suggestion for special casing the animations case. This is a better result. @REB_412 - as a result of using Jakob’s suggestion, the animation works in Edge as well since I no longer set the duration value dynamically. ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [November 25, 2018, 12:18am UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/17 "2018-11-25T00:18:31Z")
Glad you got the problems sorted out with regard to Microsoft Edge. I’ll have to keep that in mind in the future. I agree using Jacob\_E’s suggestion is neater approach. ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [November 26, 2018, 4:23pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/19 "2018-11-26T16:23:48Z")
I believe the example page (:examples/reduceMotion.htm") has code that is not consistent with what is being described in this article. You might want to check it out. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 26, 2018, 7:32pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/20 "2018-11-26T19:32:01Z")
Thanks for pointing that out! Fixed those 🙂 ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [December 19, 2018, 3:41pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/21 "2018-12-19T15:41:08Z")
“_Regular expressions are really powerful…and very confusing for your typical user. That’s why I usually don’t use them in tutorials_.” I want to follow up on this point here about the use of regular expressions. Why are they any more confusing than the following function getHSLAColor(h, s, l, a) { return `hsl(${h}, ${s}%, ${l}%, ${a})`; } which you used in a recent article on generating random colors? When I first saw that I didn’t know exactly what it was because I had never seen that kind of thing before. I have since found out that it a new feature of ECMAScript 6 after reading Kyle Simpson’s book “_ES6 & Beyond_”. Do you think your typical reader would know what this is? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 19, 2018, 5:43pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/22 "2018-12-19T17:43:17Z")
Both of the articles are a bit different in purpose. The code for the animation accessibility article is one that I would expect people to modify the code to suit their needs. Understanding how it works is an important part of being able to do that, so I tried to keep things more readable and simple. For the random colors one, how to use the code is more important than how the code works. I don’t even spend too much time explaining how the code works, for the expectation is that the users would just copy/paste and forget about it. That is partly why I throw in conveniences like the ES6 literal syntax in there. Personally, I would also say that the literal syntax is still easier for your typical developer than regular expressions 🤓 ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [December 19, 2018, 8:15pm UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/23 "2018-12-19T20:15:37Z")
> Blockquote > Personally, I would also say that the literal syntax is still easier for your typical developer than regular expressions I would have to agree with you on that one, once they become familiar with the new ES6 literal syntax. ---
**Author:** ![pfeffermuehle](https://avatars.discourse-cdn.com/v4/letter/p/7ba0ec/32.png) [@pfeffermuehle](https://forum.kirupa.com/u/pfeffermuehle)\ **Post date:** [January 10, 2019, 10:33am UTC](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954/24 "2019-01-10T10:33:40Z")
I wonder how this works with complex UI Animation that is entirely handled by javascript or even external javascript, transition-groups for example. Some of those external components don’t even have the option to interface with the animation. [Next page](https://forum.kirupa.com/t/toggling-all-animations-on-and-off/638954.md?page=2)