How to Add a Count-Up Animation in Showit

Want to add a dynamic count-up animation to your Showit website? Whether you want to highlight how many weddings you’ve photographed, products you’ve sold, or projects you’ve completed, this tutorial will show you how to create a smooth count-up animation with a few simple steps—no coding experience required!

Step-by-Step Guide: Creating a Count-Up Animation in Showit

Step 1: Add Your Text Box in Showit

1. In Showit, add a Text Box where you want the count-up animation to appear.
2. Enter the text you want. For example: 0+ Weddings Photographed

💡 Important: Your number needs to start at 0 because we’ll use code to count up from that number.

Step 2: Open the Code Editor for the Text Box

Now, you’ll need to wrap the number in a special code snippet.

1. Hold the Option key (Alt on Windows) and double-click on the text box. This will open the code editor for that specific text box.
2. In the code editor, you need to wrap the number you want to animate with a <span> tag
   Example
   <span class="rise-count-up" data-target="200">0</span>+ Weddings Photographed

💡 Don’t forget to add your closing span </span> after the 0.

What This Does:

• The <span> tag tells the browser which number to animate.
• The data-target attribute (data-target="200") sets the final number the animation will count up to.
• The 0 inside the <span> is the starting number.

💡 Important: Make sure you don’t remove or change any other part of your text. Only wrap the number like shown above.

Step 3: Add the JavaScript to Showit

Next, we’ll add a small piece of JavaScript to make the count-up animation work.

1. In Showit, click on the page where your text box is located.
2. Go to Advanced Settings in the right-hand panel.
3. Find the Inline JavaScript box.
4. Paste the following code into that box

document.addEventListener('DOMContentLoaded', () => {
  const counters = document.querySelectorAll('.rise-count-up');

  const formatNumber = (number) => {
    return number.toLocaleString(); // Adds commas (e.g., 150,000)
  };

  const countUp = (counter) => {
    const target = parseInt(counter.getAttribute('data-target').replace(/,/g, ''), 10);
    const totalDuration = 3000;
    const slowDuration = 1500;
    const fastDuration = totalDuration - slowDuration;
    const fastTarget = 0.8 * target;
    let startTime = null;

    const updateCount = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const elapsed = timestamp - startTime;
      let currentCount;

      if (elapsed < fastDuration) {
        const progress = elapsed / fastDuration;
        const eased = progress * (2 - progress);
        currentCount = Math.floor(eased * fastTarget);
      } else if (elapsed < totalDuration) {
        const slowElapsed = elapsed - fastDuration;
        const progress = slowElapsed / slowDuration;
        currentCount = Math.floor(fastTarget + (target - fastTarget) * progress);
      } else {
        currentCount = target;
      }

      counter.textContent = formatNumber(currentCount);

      if (elapsed < totalDuration) {
        requestAnimationFrame(updateCount);
      } else {
        counter.textContent = formatNumber(target);
      }
    };

    requestAnimationFrame(updateCount);
  };

  const observerOptions = { threshold: 0.1 };
  const observerCallback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
        countUp(entry.target);
        entry.target.classList.add('counted');
        observer.unobserve(entry.target);
      }
    });
  };

  const observer = new IntersectionObserver(observerCallback, observerOptions);
  counters.forEach(counter => observer.observe(counter));
});

Step 4: Customize the Animation Speed

In the JavaScript code, you’ll notice these two lines:

const totalDuration = 3000; // Total animation duration in milliseconds
const slowDuration = 1500; // Duration for the slow end phase


• totalDuration: Controls how long the entire animation takes (in milliseconds). For example, 3000 means 3 seconds.
• slowDuration: Controls how slow the final “ticking” phase is (in milliseconds). For example, 1500 means the last 1.5 seconds will slow down.

You can change these numbers to make the animation faster or slower. For example:

• Faster animation: const totalDuration = 2000; const slowDuration = 1000;
• Slower animation: const totalDuration = 5000; const slowDuration = 3000;

Step 5: Save and Preview

After adding the JavaScript and updating your text:

1. Click Preview in Showit.
2. Preview your page.
3. Scroll down to where the text box is. You should see the number counting up when it becomes visible!

Final Thoughts

With this simple setup, you’ve added a professional, dynamic count-up animation to your Showit website. You can reuse this technique on multiple pages—just remember to wrap any number you want to animate with the <span> tag and give it the rise-count-up class.

Happy animating!