Streaming live at 10am (PST)

Button to disable all animations on a site?

Hi, I have a few scroll interactions on a site but the client wants a button in the footer to disable all of the interactions for accessibility reasons if the user so wishes. I’ve had a search through and can’t find a way to do this - would it need custom code? I’m happy with HTML and CSS but a complete newbie to javascript so could do with some help if custom code is needed please?

I’ve not included links to my site - my client has requested that the site isn’t posted anywhere until it is complete but this issue isn’t individual to this site anyway.

So to recap, I am looking for a way to have a button, eg “Turn off all animations”, that when clicked would stop all animations on the site from triggering, and instead the site would be static. If it is possible, then the ability to control which animations were are switched off would be amazing but not crucial.

Thanks in advance!


Here is my public share link: LINK
(how to access public share link)

1 Like

Hi Theo,

Welcome to the forums. I understand your question but I want to take a step back first, and look at the issue at hand - or the client’s request rather. Your client wishes to disable all animations on the page at the click of a button because to them this solves an accessibility issue, am I right?

I’d want to know which accessibility issues this would solve, and if they are not better solved WITHOUT the user having to click a button. The reason I step back and ask what and why first, is because to me it feels like it’s a not so great option to handle a concern of theirs.

You should tackle this issue without requiring a button to be clicked somewhere. Your website should be good to go for everyone, so that by virtue of your accessibility best practises; those people can use THEIR software to make the site accessible fort hem, like screen readers etc.

To get into the technical; no quick way to do that but you could write a JS script in custom code that disables the event listeners you have ‘listening’ when to trigger animations.

Hi Ozone,

Thanks for responding so quickly!

The issue is that we have text paragraphs fade into view as the user scrolls through the site. My client likes the animation and wants to keep it but wants to give users the option to turn it off as she says she finds it more difficult to read when wearing varifocal glasses (I can’t comment as I don’t wear them!)

I understand. To me it sounds like a valid reason to do something about it.

The thing is, you either have the fades or you don’t. Laying the burden of toggling them off with the end user is not very user friendly and it bulks up your design so the live result is not the experience you intended for your visitors. Not to be rude; but this sounds like a case of “client climbing in the designer chair”.

I get that you want to make your client happy and serve up the best of your abilities; but that often means NOT executing their ideas as they lay them out. This is a good example of when you have to backpedal and look at the reason for her request, and fix the issue in a better way than her proposal.

If I may, I’d like to propose that you explore 2 options together with your client.

The premise of the issue is; the fading in of text content can make it harder for wearers of varifocal glasses to fully experience the page without any readability issues.

One option is, as you said; a method or button to switch off those text fades.

Upsides to this method:

  • You get text fade for people that can deal with it.
  • People wearing these types of glasses can disable those animations to improve readability.
  • Only a bit a JS to write, no complete overhaul of your animation setup

Downsides are:

  • You’re not really fixing the intrinsic problem: fading text is bad for readers with varifocal glasses.
  • I’d argue most of your visitors will not find that button, care to search or click it.
  • You now sort of have 2 “versions” of the page UX, depending on button press.
  • On every future change, you need to also adjust the JS

Another option (the better option in my opinion) is to disable fade on the text blocks altogether, and fade in images or other non-readables.

Upsides to this method:

  • Your animations stay in place and your page keeps it’s dynamic feel.
  • No 2 versions of the same page UX.
  • A cleaner out-of-the-box experience that is the same for everyone regardless of handicap
  • Easier to update in future
  • No custom code needed

Downsides are

  • You lose fade on text by the fade being moved over to non-readable items. Is that a big deal for your design?
  • You kind of have to rework some animation setup you have already done.

Both options fix the issue. The first option with the button has more downsides and feels more like a patch to me. The second option takes into regard the issue at the design, so it feels natural and becomes part of the site rather than a band-aid on top of it.

Great reply @Ozone

I’d also add, as a “second set of eyes”, that adding a button in the footer is a poor solution for another reason (expanding on one of the points made by Ozone that I only saw when reading their reply for a second time after writing this one…)

If you go on to a website, and find that you don’t like the design / can’t read the content / whatever, are you really going to scroll all the way to the bottom in the slight hope that there is a button there? Of course not - you’re simply going to click off the site. Can you honestly say that it would cross your mind, even for a moment, to go searching for a “disable animations” button on a site if you required it?