Animations

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

Provide users with control over any animations in your carousel. Carousels typically periodically rotate the displayed items. Providing different ways for users to stop this animation is essential for people who might find the permanent changes distracting, and for people who need more time to read carousel items.

Stop button

One common approach to control carousel animations is to provide a button to allow users to stop and resume the animations. In the example below, such a button is added to the carousel items indicator bar. The button label and its function alternate, depending on whether the animation is currently on or off:

Code snippet: 
<button data-action="stop"><span class="visuallyhidden">Stop Animation </span>￭</button>
Code snippet: 
<button data-action="start"><span class="visuallyhidden">Start Animation </span>▶</button>

Note: The script only replaces the value of the button rather than to replace the button entirely. If the button is removed, then the focus would be lost for keyboard users.

Pause when focused

Another useful approach is to pause the carousel animation when the carousel receives focus by keyboard or is hovered over by mouse. Pausing the animation ensures that keyboard users do not lose focus when the carousel item is changed. It is also useful for people who need more time to read the content and to maneuver the mouse to a link or control inside the carousel item.

Code snippet: 
carousel.addEventListener('mouseenter', suspendAnimation);
carousel.addEventListener('mouseleave', startAnimation);

carousel.addEventListener('focusin',
  function(event) {
    if (!hasClass(event.target, 'slide')) {
      suspendAnimation();
    }
  }
);
carousel.addEventListener('focusout',
  function(event) {
    if (!hasClass(event.target, 'slide')) {
      startAnimation();
    }
  }
);

Note: The focusin and focusout events are defined in the W3C Document Object Model (DOM) Level 3 Events Specification (Working Draft) and implemented in many browsers. Firefox needs a short polyfill at the time of publication of this tutorial.

The sample below is a demo of the final carousel that is built by putting together all examples of this tutorial:

Example:

Featured Articles:

Code snippet: JavaScript: In initialization
var slidewrapper = slides[0].parentNode;

slidewrapper.addEventListener('transitionend', function (event) {
  var slide = event.target;
  removeClass(slide, 'in-transition');
  if (setFocus && hasClass(slide, 'current')) {
    slide.setAttribute('tabindex', '-1');
    slide.focus();
    setFocus = false;
  }
});

Success Criteria:

  • 2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true:

    • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and

    • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

    (Level A)