Including a widget that disables site animations?

  • Hey y’all

    I’m pretty new to WordPress, and I’ve spent about the last month just fiddling with the same two pages repeatedly, trying to create a system where I can have both a vibrantly colored (within reason) and animated website and one that’s darker and removes animations. After banging my head repeatedly against theme-switcha for several weeks with no luck (not sure what is interfering with it, but it never reads my child themes right – it either tries to read them both at the same time or only one) I’ve decided to just commit to buying a dark mode plugin with a high-degree of customization so I can get the colors where I want them to be.

    However, that leaves the animations. I’ve been looking for a plugin that would slap a button on the site that would turn them off (I have an accessibility plugin installed that is supposed to be able to do that, but on reload it immediately toggles the animations back on, which… doesn’t seem helpful?) – but there does not seem to be one readily available. I’m fairly sure I know the CSS code for disabling animations (all the animations are CSS, not Js) – but I don’t know how to apply that site-wide or how to get it into a widget. Any help or direction would be appreciated. This is intended to be an informational site and I would hate to drive anybody away because of motion sickness.

Viewing 2 replies - 1 through 2 (of 2 total)

  • I put this in my theme, to handle users that have the preference set in their operating system.

    @media screen and (prefers-reduced-motion: reduce) {  
  * {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

    But you could have a little JS to add just the * {} part in its own <style> element when the button is clicked. Remove it when clicked again.

    I have been debating with myself on how my theme should provide a dark mode. I can provide defaults, let the site owner choose colors, let the site visitor choose palettes, but each has its own strangeness because of the system setting for dark mode.

    Thread Starter elfloftpigeons

    (@elfloftpigeons)

    Thank you, that’s helpful!
    Unfortunately while I’m definitely getting better at CSS, JS is a little beyond me. I’ll try to look for examples of JS triggering styles and turning them off again – on my previous attempts though it seems like WordPress doesn’t necessarily like all JS formats or something? Like, things I’ve tried to put in before the site goes “no thank you” for. So. Hm. Going to have to look into that more.
    Also going to investigate to see if this version of this dark mode plugin I am getting (its the most expensive version and you can customize the CSS and colors) would let me slip a no-animation signal into it without complaint. I’ll let you know if that ends up being a solution for me. Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Including a widget that disables site animations?’ is closed to new replies.