Toggling All Animations On and Off

programming
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
1 Like
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

1 Like
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.

1 Like
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

1 Like
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.

1 Like
20

Thanks for pointing that out! Fixed those :slight_smile:

21

“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?

22

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

23

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.

1 Like
24

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.