Creating Casper's Count Animation Section: A Step-by-Step Guide

In this blog post, we will walk you through the process of creating a visually appealing count animation section for your website, similar to the one featured on the Casper website. This section can be a great way to showcase key statistics or achievements in a dynamic and engaging manner.

Code: https://github.com/ndrishinski/blogs/blob/master/count-animation/sections/count-animation.liquid

Prefer video?

Enjoy, otherwise read on!

Step 1: Setting Up the HTML Structure

First, we need to create the HTML structure for our count animation section. This will include a container for our statistics and individual items for each statistic.

<section class="stats-section">
  <div class="container">
    <div class="stats-grid">
      <div class="stat-item">
        <img class="stat-icon" src="image1.jpg" />
        <h3 class="stat-number">
          <span class="count-up" data-value="200" data-delay="100">0</span>
        </h3>
        <p class="stat-text">Happy customers and counting!</p>
      </div>
      <div class="stat-item">
        <img class="stat-icon" src="image2.jpg" />
        <h3 class="stat-number">
          <span class="count-up" data-value="135" data-delay="100">0</span>
        </h3>
        <p class="stat-text">Report improved overall health.</p>
      </div>
      <div class="stat-item">
        <img class="stat-icon" src="image3.jpg" />
        <h3 class="stat-number">
          <span class="count-up" data-value="135" data-delay="100">0</span>
          /5 customers
        </h3>
        <p class="stat-text">Recommend our products to family.</p>
      </div>
    </div>
  </div>
</section>

Step 2: Adding CSS Styles

Next, we will style our section using CSS. This will ensure that our statistics are displayed in a visually appealing grid layout.

<style>
  /* Reset and base styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .stats-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    width: 100%;
    height: 200px;
    background-color: #ecf1f3; /* Change as needed */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
  }

  .stat-icon {
    width: 50px; /* Adjust size as needed */
    margin-bottom: 0.5rem;
  }

  .stat-number {
    font-size: 2.875rem; /* Adjust size as needed */
    font-weight: 700;
    color: #1e306e; /* Change as needed */
    margin-bottom: 0.5rem;
  }

  .stat-text {
    font-size: 1.875rem; /* Adjust size as needed */
    color: #1e306e; /* Change as needed */
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 768px) {
    .stats-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .stats-section {
      height: auto;
      padding: 2rem 0;
    }

    .stat-number {
      font-size: 1.5rem;
    }
  }
</style>

Step 3: Implementing the Count Animation

Now, we will add the JavaScript code that will handle the counting animation. This code will increment the number displayed in each statistic from 0 to the target value.

 

<script>
  document.addEventListener("DOMContentLoaded", function () {
    let all = document.querySelectorAll(".count-up");

    function doUpdate(num, element) {
      element.innerHTML = num;
    }

    function animate(number, delay = 100, element) {
      let i = 0;
      const interval = setInterval(() => {
        doUpdate(i, element);
        if (i >= number) {
          clearInterval(interval);
        }
        i++;
      }, delay);
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            animate(
              Number(entry.target.dataset.value),
              Number(entry.target.dataset.delay),
              entry.target
            );
            observer.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 1.0,
      }
    );

    all.forEach((i) => {
      observer.observe(i);
    });
  });
</script>

Step 4: Customizing Your Section

Feel free to customize the images, numbers, and text in the HTML structure to fit your brand and message. You can also adjust the CSS styles to match your website's design.

For my icons I used https://www.svgrepo.com/ to get some free SVG icons for consistency.

Conclusion

By following these steps, you can create a stunning count animation section for your website that engages visitors and highlights your achievements. This feature not only adds visual interest but also effectively communicates important information to your audience.