Toggling All Animations On and Off


#1

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

#4

If you have any questions about the contents of this tutorial, just reply here :slight_smile:


#5

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.

#7

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.

:slight_smile:


#8

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.


#9

Strange! Doing a web search confirms what you have noticed about it not being supported :frowning:


#10

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?


#11

a code pen demo https://codepen.io/qcgm1978/pen/rQdKvm


#12

I mostly use Mac/Chrome, but I do check on Edge prior to publishing to make sure everything works (via browserstack). 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 :slight_smile:


#13

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/

I’ll reach out to my former team and let them and see if it can be fixed in an upcoming release!


#14

That Edge… always a step behind. It’s taking after its now deceased sibling, IE.


#15

Thanks for sharing :slight_smile:
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


#16

@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.


#17

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.


#19

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.


#20

Thanks for pointing that out! Fixed those :slight_smile: