"Pause Animations" Button for Visitors
Adds a floating button that lets any visitor stop animations, transitions and autoplaying videos on the site. The choice is remembered on their device.
Opens WPIDE on
Code
<button type="button" class="wpide-motion-toggle" aria-pressed="false">Pause animations</button>
<style>
.wpide-motion-toggle{position:fixed;left:12px;bottom:12px;z-index:99990;padding:8px 14px;border:2px solid #fff;border-radius:6px;background:#1d2327;color:#fff;font-size:14px;cursor:pointer;}
.wpide-motion-toggle:focus-visible{outline:3px solid #72aee6;outline-offset:2px;}
html.wpide-no-motion *,html.wpide-no-motion *::before,html.wpide-no-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
</style>
<script>
(function () {
var key = 'wpideNoMotion';
var btn = document.querySelector('.wpide-motion-toggle');
if (!btn) { return; }
function apply(on) {
document.documentElement.classList.toggle('wpide-no-motion', on);
btn.setAttribute('aria-pressed', on ? 'true' : 'false');
btn.textContent = on ? 'Play animations' : 'Pause animations';
document.querySelectorAll('video').forEach(function (v) { if (on) { v.pause(); } });
}
var stored = false;
try { stored = localStorage.getItem(key) === '1'; } catch (e) {}
apply(stored);
btn.addEventListener('click', function () {
var on = btn.getAttribute('aria-pressed') !== 'true';
apply(on);
try { localStorage.setItem(key, on ? '1' : '0'); } catch (e) {}
});
})();
</script>Notes
Change the bottom/left values in the CSS to move the button away from other floating elements such as chat widgets.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.