DEV Community

Abdulqudus Abubakre
Abdulqudus Abubakre

Posted on

4 1 1 1

Pausing, Stopping, and Hiding Animations with animation-play-state

When working with animations, it’s essential to ensure they are accessible to everyone. According to WCAG SC 2.2.2: Pause, Stop, Hide, users must be able to pause, stop, or hide animations that last more than 5 seconds. Let's break down how you can use CSS and JavaScript to create an animation that users can control.

A simple animation

We'll start by creating a simple animation using CSS keyframes. This animation moves a box horizontally across the screen.

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Adding play state

Next, we introduce the animation-play-state property. This property allows us to control whether the animation is running or paused. We use a CSS variable, --play-state, to set the default state of the animation.

:root {
  --play-state: running;
}

.animated-box {
  animation-play-state: var(--play-state);
}
Enter fullscreen mode Exit fullscreen mode

Here, we define a --play-state variable at the root level and set its initial value to running. The animation will run initially, but this variable gives us a way to control it later.

Adding control with javascript

We add a button that allows users to pause/play the animation by updating the --play-state variable

<button id="toggle-btn">Pause Animation</button>

<script>
  const toggleButton = document.getElementById('toggle-btn');
  const root = document.documentElement;

  toggleButton.addEventListener('click', () => {
    const currentPlayState = getComputedStyle(root).getPropertyValue('--play-state').trim();

    if (currentPlayState === 'running') {
      root.style.setProperty('--play-state', 'paused');
      toggleButton.textContent = 'Resume Animation';
    } else {
      root.style.setProperty('--play-state', 'running');
      toggleButton.textContent = 'Pause Animation';
    }
  });
</script>
Enter fullscreen mode Exit fullscreen mode

We use getComputedStyle to get the current value of the --play-state variable. Depending on whether the animation is running or paused, we toggle the value and also update the text of the button accordingly.

You can find the complete working example on codepen

By implementing simple solutions like animation-play-state and providing controls for animations, you help create a more inclusive digital experience.

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (4)

Collapse
 
nizzel profile image
Neil

If there is more than one animation on a page is it possible to have a separate play/pause button for each one?

Collapse
 
ibn_abubakre profile image
Abdulqudus Abubakre

Yes, you can have separate control buttons for each of the animations, or a single button to control all the animations. You pretty much have flexibility to do what you want here

Collapse
 
nizzel profile image
Neil

So how would you assign a button to a specific animation if there was multiple animations running on a page.

Thread Thread
 
ibn_abubakre profile image
Abdulqudus Abubakre

You can have something like this

<div class="animation-container">
    <div class="box rotate" id="rotate-box"></div>
    <button class="control-button" onclick="toggleAnimation('rotate-box')">Pause/Play</button>
  </div>
  <div class="animation-container">
    <div class="box bounce" id="bounce-box"></div>
    <button class="control-button" onclick="toggleAnimation('bounce-box')">Pause/Play</button>
  </div>
  <div class="animation-container">
    <div class="box fade" id="fade-box"></div>
    <button class="control-button" onclick="toggleAnimation('fade-box')">Pause/Play</button>
  </div>

  <script>
    function toggleAnimation(id) {
      const element = document.getElementById(id);
      const currentState = getComputedStyle(element).animationPlayState;
      element.style.animationPlayState = currentState === 'running' ? 'paused' : 'running';
    }
  </script>
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

Get the real story behind DevSecOps

Explore data from thousands of apps to uncover how container image size, deployment frequency, and runtime context affect real-world security. Discover seven key insights that can help you build and ship more secure software.

Read the Report

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay