Back

Designing a Modern Snackbar with Smooth Fade Animation

Master the art of creating an interactive snackbar that appears and disappears with a sleek fade effect, enhancing user experience.

HTML

In this guide, we'll learn how to create a snackbar—a small notification that pops up from the bottom of the screen. We'll animate it with a fade-in and fade-out effect. First, we need a simple HTML structure.


        <div id="snackbar" class="snackbar">This is a snackbar message</div>
        <button onclick="showSnackbar()" class="snackbar-button">Show Snackbar</button>

The above code creates a div with the message and a button to trigger the snackbar. The button has an onclick event that calls our JavaScript function showSnackbar().

JavaScript

Let's implement the JavaScript that will handle the display of our snackbar. We will toggle the visibility by adding and removing classes.


        function showSnackbar() {
          let snackbar = document.getElementById('snackbar');
          snackbar.classList.add('show');

          setTimeout(() => {
            snackbar.classList.remove('show');
          }, 3000);
        }

In the above script, we first select our snackbar element by its ID. On pressing the button, the showSnackbar() function is triggered, adding the 'show' class to our snackbar, which activates the CSS for visibility and opacity. After 3 seconds, the 'show' class is removed, hiding the snackbar.

CSS

Now let's dive into styling. First, we'll style the snackbar itself to ensure it appears with a smooth transition from invisible to visible.


        #snackbar {
          visibility: hidden;
          min-width: 250px;
          background-color: #333;
          color: #fff;
          text-align: center;
          border-radius: 5px;
          padding: 16px;
          position: fixed;
          z-index: 1;
          left: 50%;
          bottom: 30px;
          font-size: 17px;
          transform: translateX(-50%);
          transition: visibility 0s, opacity 0.5s ease-in-out;
          opacity: 0;
        }

Our snackbar is initially invisible. The visibility is set to hidden, and opacity is set to 0. The transition is applied to both visibility and opacity, creating a fade effect. The snackbar is centered horizontally by transforming it 50% of its own width to the left. The .show class changes the visibility to visible and sets opacity to 1, making the snackbar appear with a fade-in effect.


        .show {
          visibility: visible !important;
          opacity: 1 !important;
        }

Now let's look at the style for our button, which allows users to trigger the snackbar:


        .snackbar-button {
          padding: 10px 20px;
          background-color: #00b894;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 16px;
        }

        .snackbar-button:hover {
          background-color: #019873;
        }

The button is stylishly simple, with a background color that changes when hovered over, indicating interactivity. It's important to ensure your UI components communicate their state and actions clearly to users.

Final Thoughts

Snackbars are a great way to provide simple feedback to user actions. Whether it's acknowledging a successful operation or providing critical information, snackbars offer an elegant solution. By controlling the visibility and opacity through CSS transitions, we're able to provide users with soft, unobtrusive notifications. Remember to keep your messages succinct and relevant to maintain a seamless user experience. Feel free to further customize the placement and styling of your snackbar to better suit your web application's design and user interaction flow.

Whole code

<div id="snackbar" class="snackbar">This is a snackbar message</div>
<button onclick="showSnackbar()" class="snackbar-button">Show Snackbar</button>

<script>
function showSnackbar() {
  let snackbar = document.getElementById('snackbar');
  snackbar.classList.add('show');

  setTimeout(() => {
    snackbar.classList.remove('show');
  }, 3000);
}
</script>

<style>
#snackbar {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
  transform: translateX(-50%);
  transition: visibility 0s, opacity 0.5s ease-in-out;
  opacity: 0;
}

.show {
  visibility: visible !important;
  opacity: 1 !important;
}

.snackbar-button {
  padding: 10px 20px;
  background-color: #00b894;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.snackbar-button:hover {
  background-color: #019873;
}
</style>

Thank you for reading this article.

Designing a Modern Snackbar with Smooth Fade Animation

HTML

JavaScript

CSS

Final Thoughts

Whole code

Comments

More snackbars

Similar

See also