Buttons / Pause Animations

Description of component:

ClickUp Ticket

How to use this component

TBD

Component Example

Code Snippets

HTML

JS

                    
// get all anchor titles
const pauseAnimationsBtn = document.getElementById('js--pause-animations');
const cssAnimations = document.querySelectorAll('.js--css-animation');
var i;

pauseAnimationsBtn.addEventListener('click', function(e){
    var currentState = e.currentTarget.getAttribute('aria-pressed');
    
    if( currentState == 'false' ) {
        toggleCssAnimations('paused');
        document.body.classList.add('animations-paused');
        e.currentTarget.setAttribute('aria-pressed', 'true');
        e.currentTarget.innerHTML = 'Animations: Paused';
    } else {
        toggleCssAnimations('running');
        document.body.classList.remove('animations-paused');
        e.currentTarget.setAttribute('aria-pressed', 'false');
        e.currentTarget.innerHTML = 'Animations: Playing';
    }
    
});

function toggleCssAnimations(state) {
    for( i = 0; i < cssAnimations.length; i++ ) {
        cssAnimations[i].style.animationPlayState = state;
    }
}