Number Count

Create a number count animation in Webflow

The fs-numbercount attribute creates animated number counting effects that trigger when elements enter the viewport.

Overview

Number Count animates numbers from a start value to an end value with:

• Automatic animation trigger on viewport intersection
• Customizable start and end values
• Configurable animation duration
• Optional number formatting with locales
• Adjustable intersection threshold
• Accessibility support

Basic Usage

Simple Counter

Animate a number when it enters the viewport:

Basic Counter

<!-- Number will animate from 0 to 100 -->
<div fs-numbercount="number">100</div>

By default, the number count starts at 0 and animates to the number displayed in the element’s text content. You can customize both values using attributes.

Attribute Reference

Element Attributes

Attribute	Value	Description
fs-numbercount	number	Defines an element with a number to be animated

Settings Attributes

Attribute	Values	Default	Description
fs-numbercount-start	Number	0	Starting number for the animation
fs-numbercount-end	Number	Auto-detected	Ending number (extracted from element text if not specified)
fs-numbercount-duration	Number (milliseconds)	1000	Animation duration
fs-numbercount-threshold	Number (0-100)	25	Percentage of element visible before triggering (0-100)
fs-numbercount-locale	Locale code or auto	-	Format number with locale-specific separators

Number Formatting

Locale-Based Formatting

Format numbers according to locale standards:

US Format

<!-- 1,234,567.89 -->
<div 
  fs-numbercount="number"
  fs-numbercount-end="1234567.89"
  fs-numbercount-locale="en-US"
>1234567.89</div>

Use fs-numbercount-locale="auto" to automatically format numbers based on the visitor’s browser language settings.

Intersection Threshold

Control when the animation triggers based on element visibility:

<!-- Trigger when 50% of element is visible -->
<div 
  fs-numbercount="number"
  fs-numbercount-threshold="50"
>1000</div>

<!-- Trigger immediately when any part enters viewport -->
<div 
  fs-numbercount="number"
  fs-numbercount-threshold="0"
>500</div>

<!-- Trigger only when fully visible -->
<div 
  fs-numbercount="number"
  fs-numbercount-threshold="100"
>750</div>

Examples

Statistics Section

<div class="stats-grid">
  <div class="stat-card">
    <div 
      class="stat-number"
      fs-numbercount="number"
      fs-numbercount-duration="1500"
    >10000</div>
    <div class="stat-label">Happy Customers</div>
  </div>
  
  <div class="stat-card">
    <div 
      class="stat-number"
      fs-numbercount="number"
      fs-numbercount-duration="1200"
    >500</div>
    <div class="stat-label">Projects Completed</div>
  </div>
  
  <div class="stat-card">
    <div 
      class="stat-number"
      fs-numbercount="number"
      fs-numbercount-start="95"
      fs-numbercount-end="99.9"
      fs-numbercount-duration="2000"
    >99.9</div>
    <div class="stat-label">% Satisfaction Rate</div>
  </div>
</div>

Revenue Counter

<div class="revenue-display">
  <span class="currency">$</span>
  <span 
    fs-numbercount="number"
    fs-numbercount-start="0"
    fs-numbercount-end="1250000"
    fs-numbercount-duration="3000"
    fs-numbercount-locale="en-US"
    class="revenue-amount"
  >1,250,000</span>
  <span class="suffix">+ Revenue</span>
</div>

Countdown Style

<!-- Count down from 100 to 0 -->
<div 
  fs-numbercount="number"
  fs-numbercount-start="100"
  fs-numbercount-end="0"
  fs-numbercount-duration="2000"
  class="countdown"
>0</div>

Multiple Counters with Delays

Stagger animations using CSS animation delays or position them at different viewport intersections:

<div class="counters-wrapper">
  <!-- First counter triggers first -->
  <div 
    fs-numbercount="number"
    fs-numbercount-threshold="30"
  >1000</div>
  
  <!-- Second counter triggers later -->
  <div 
    fs-numbercount="number"
    fs-numbercount-threshold="40"
  >2000</div>
  
  <!-- Third counter triggers last -->
  <div 
    fs-numbercount="number"
    fs-numbercount-threshold="50"
  >3000</div>
</div>

Decimal Numbers

<!-- Animate decimal values -->
<div class="rating">
  <span 
    fs-numbercount="number"
    fs-numbercount-start="0"
    fs-numbercount-end="4.8"
    fs-numbercount-duration="1500"
  >4.8</span>
  <span class="rating-text">/ 5.0 Stars</span>
</div>

<!-- Percentage with decimals -->
<div 
  fs-numbercount="number"
  fs-numbercount-start="0"
  fs-numbercount-end="99.99"
>99.99%</div>

Large Numbers with Suffixes

<div class="metric">
  <span 
    fs-numbercount="number"
    fs-numbercount-end="2.5"
    fs-numbercount-duration="2000"
  >2.5</span>
  <span class="suffix">M+</span>
  <div class="label">Users Worldwide</div>
</div>

Styling Counter Elements

Add visual polish to your counters:

/* Counter container */
.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: #007bff;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* Use tabular numbers for consistent width */
[fs-numbercount] {
  font-variant-numeric: tabular-nums;
}

/* Add animation while counting */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

[fs-numbercount] {
  animation: pulse 1s ease-in-out;
}

/* Style for completed animation */
[fs-numbercount].counting-complete {
  animation: none;
  color: #28a745;
}

Accessibility Features

ARIA Labels

Automatically adds ARIA attributes to ensure screen readers announce the final value correctly.

Reduced Motion

Respects user’s motion preferences and can skip animation if needed.

Semantic Content

The final number value is properly represented in the DOM for assistive technologies.

Intersection Observer

Uses modern Intersection Observer API for performant scroll detection.

JavaScript API

Access the Number Count API programmatically:

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'numbercount',
  (numberElements) => {
    // numberElements contains all initialized number count elements
    console.log('Number count elements:', numberElements);
    
    // Custom logic here
  },
]);

Best Practices

Use Tabular Numbers

Apply font-variant-numeric: tabular-nums to prevent layout shifts during animation:

[fs-numbercount] {
  font-variant-numeric: tabular-nums;
}

Match Start Value to End Format

If your end value has commas or decimals in the HTML, the library extracts just the numeric value. Use attributes for precise control:

<!-- Good: Clear numeric value -->
<div fs-numbercount="number" fs-numbercount-end="1000">1,000</div>

<!-- Better: Explicit attributes -->
<div fs-numbercount="number" fs-numbercount-end="1000">0</div>

Adjust Threshold for Timing

Lower thresholds trigger earlier, higher thresholds wait for more visibility:

<!-- Trigger early for better user experience -->
<div fs-numbercount="number" fs-numbercount-threshold="10">500</div>

Consider Animation Duration

Match duration to the magnitude of the number:

<!-- Quick for small numbers -->
<div fs-numbercount="number" fs-numbercount-duration="800">100</div>

<!-- Slower for large numbers -->
<div fs-numbercount="number" fs-numbercount-duration="3000">1000000</div>

The animation triggers only once when the element enters the viewport. If users scroll past and return, the final value will be displayed without re-animating.

Common Use Cases

• Statistics and metrics on landing pages
• Revenue or growth numbers in dashboards
• Countdown timers for events
• Achievement counters in gamification
• Product or customer count displays
• Performance metrics and KPIs
• Rating displays with decimal precision