Sling Academy
Home/JavaScript/Pause Animations on Hidden Tabs via JavaScript Page Visibility

Pause Animations on Hidden Tabs via JavaScript Page Visibility

Last updated: December 13, 2024

Web applications are becoming increasingly complex, often relying heavily on animations and dynamic content to create engaging user experiences. However, these animations can become a performance bottleneck, especially when a tab is not actively being viewed. A useful feature to optimize this is the Page Visibility API, a powerful tool that allows developers to determine the visibility state of a tab or a window. This API can help in conserving resources by pausing animations or any other costly processing tasks when a tab is hidden. In this article, we will explore how to use the Page Visibility API in JavaScript to pause animations when a tab is hidden.

Understanding the Page Visibility API

The Page Visibility API is a part of the HTML5 specification and provides two key properties:

  • document.visibilityState: Indicates the current visibility of the document. It can have three values: 'visible', 'hidden', and 'prerender'. For our purposes, we are particularly interested in the 'visible' and 'hidden' states.
  • visibilitychange Event: Fires when the value of document.visibilityState changes.

Basic Usage

To use the Page Visibility API, you first need to listen for the visibilitychange event on the document. Here’s a basic example:

document.addEventListener('visibilitychange', function() {  
  if (document.visibilityState === 'hidden') {
    console.log('Tab is hidden');
    // Pause animation or other time-based activities
  } else {
    console.log('Tab is visible');
    // Resume animation or activities
  }
});

This event listener will track when the tab is switched to a hidden state and vice versa. You can execute your pause or resume logic inside the conditional blocks.

Pausing Animations

Let's look at a practical example that pauses a CSS-based animation using JavaScript. Consider an animation of a spinning square using CSS keyframes:

#spinner {
  width: 50px;
  height: 50px;
  background-color: blue;
  animation: spin 2s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

To control this animation based on the visibility of the tab, you can modify the visibilitychange event listener as follows:

const spinner = document.getElementById('spinner');

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    spinner.style.animationPlayState = 'paused';
  } else {
    spinner.style.animationPlayState = 'running';
  }
});

By setting the CSS property animationPlayState to 'paused', the spinning animation is stopped when the tab is hidden and resumed when it's visible again.

Using Page Visibility for Other Resources

Beyond pausing animations, the Page Visibility API can be effectively used to manage other resources—such as interval timers, network requests, or any continuous process—that should be deferred when a tab is not in focus. Consider controlling an Interval Timer:

let timer;

function startTimer() {
  timer = setInterval(() => {
    console.log('Timer running');
  }, 1000);
}

function stopTimer() {
  clearInterval(timer);
}

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    stopTimer();  // Stop the timer when the tab is hidden
  } else {
    startTimer(); // Start the timer again when the tab becomes visible
  }
});

startTimer(); // Start timer initially

With this setup, the interval only runs when the tab is visible, conserving resources when the tab is hidden.

Conclusion

The Page Visibility API provides an efficient way to optimize web applications that use animations and other continuous processes. By detecting when a tab or page is hidden and subsequently pausing non-essential processes, developers can improve the performance and responsiveness of their applications, especially on resource-constrained devices. Incorporating these strategies into your web applications will help ensure a smooth and engaging user experience regardless of how users are interacting with your site.

Next Article: Optimize Performance by Checking Page Visibility in JavaScript

Previous Article: Run Tasks Only When Visible Using the Page Visibility API in JavaScript

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration