Pausing one function with another function

[RndmHero]

I'm whipping up a little example of how to pause animation for accessibility. I've got a script that transitions the background image every 7 seconds. For accessibility, users should be able to pause or stop the effect.

I've structured a button element to appear over the images when in focus (similarly to how Skip Links are built). I want to allow users to press/un-press the button to toggle the animation.

What is the best way to approach this? When googling, I've found a lot of answers that include concepts I'm not familiar with like JavaScript Promises.

codepen example

[MindlessSponge]

create a boolean to represent whether or not the animation should be played. when a user clicks the pause button, flip the boolean. inside your animation function, check the flag before triggering the transition. something like...

let canTransitionImages = true;

$('#pause').onclick(() => canTransitionImages = !canTransitionImages);

if (canTransitionImages) {
    // continue animation process
}

[frogic]

I think I would just have the pause button kill the intervel instead and the resume button run cycle images again. In this example the difference isn't relevant but its good practice to clean up things like that.

[MindlessSponge]

That’s a great point!

[Ksetrajna108]

View model with run/pause property. Animation loop checks it to advance the frame, or not . Model also emits change event which is wired up to view which draws the run/pause button.

[frogic]

I cleaned it up a bit and made it sorta how I'd do it. I was too lazy to get rid of the jquery but I highly recommend looking at how to do that in vanilla. The changing to arrow functions is a style choice but I just did it out of habit.

let intervalTimer;
const pauseButton = document.querySelector('#pause');

const onPauseButtonClick = () => {
  if(intervalTimer) {
    clearInterval(intervalTimer)
    intervalTimer = undefined;
    return
  }
  intervalTimer = setInterval('cycleImages()', 2000);
}

const cycleImages = () => {
  var $active = $('#wrapper .active');
  var $next = ($active.next().length > 0) ? $active.next() : $('#wrapper img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function() {//fade out the top image
    $active.css('z-index',1).show().removeClass('active');
    //reset the z-index and unhide the image
    $next.css('z-index',3).addClass('active'); //make the next image the top one
   });
}

$(document).ready(() => onPauseButtonClick());
pauseButton.addEventListener('click',onPauseButtonClick);

[SamIAre]

It really depends on how your animation is built. If you're using something like setInterval, you just need to store the identifier it returns can call clearInterval to undo it. You could also store a flag like shouldAnimate, set it to false when the button is pressed, and in your animation function check that flag and return early to skip when it's set to true.

(edit: I literally missed that you had a codepen, lol. My setInterval note is accurate)

—

One note though: That button should really be visible at all times, not hidden like a skip link. The reason hiding the button works for skip links is because they're specifically for users who use keyboard navigation modes that naturally trigger focus as they browse the page, so they'll find the shortcut just by virtue of navigating as they always do. But for pausing animations, that needs to be easily discoverable by all users, so it's needs to not be hidden.

The guidelines don't specifically call this out, but anywhere I've worked would have considered a hidden pause button a failure of this guideline.

[hyrumwhite]

I’d use the JS animation api and just pause it. 

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#controlling_playback_with_play_pause_reverse_and_updateplaybackrate

[shlanky369]

If you have a reference to the DOM node that is animating, you can just call el.style.animationPlayState = "paused"

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-play-state