Enhanced ScrollCounter Library Demo

Basic Counters

Simple Counter

0

Basic counting animation

With Prefix & Suffix

0

Custom prefix and suffix

Slow Animation

0

4 second duration with back easing

Currency & Formatting

Currency

$0.00

Automatic currency formatting

Thousands Separator

0

Comma-separated thousands

Decimals

0.00

Two decimal places

Advanced Features

Abbreviations

0

Shows as 1.5M automatically

Custom Step

0

Counts by 5s: 0, 5, 10, 15...

Bounce Easing

0

Fun bounce animation

Company Statistics

0

Happy Customers

$0

Revenue Generated

0%

Uptime

0

Team Members

Manual Controls

Manual Trigger

0

Click "Trigger Manual Only" to animate

Replay Enabled

0

Scroll up and down to see replay

New Features

✨ Decimal Support

Count with any number of decimal places

💰 Currency Formatting

Automatic currency symbols and separators

📈 Abbreviations

Smart K/M/B/T abbreviations for large numbers

🎯 Custom Steps

Count by any increment: 2s, 5s, 10s, etc.

🌊 Advanced Easing

15+ easing functions including bounce and back

🎮 Manual Controls

Trigger, reset, and control animations via JavaScript

📱 Performance

Throttled scroll events and memory cleanup

🔧 Developer Friendly

Callbacks, TypeScript ready, and modular

Usage Examples

Basic Setup

// Simple initialization
const counter = new ScrollCounter('.counter-value', {
    duration: 2000,
    easing: 'easeOutQuart',
    decimals: 0,
    currency: false
});
            

Advanced Configuration

// Advanced setup with callbacks
const counter = new ScrollCounter('.stats-counter', {
    duration: 3000,
    easing: 'easeOutBack',
    decimals: 2,
    currency: true,
    currencySymbol: '€',
    separator: '.',
    decimal: ',',
    abbreviate: true,
    onStart: (element, startValue, targetValue) => {
        console.log('Animation started!');
    },
    onComplete: (element, finalValue) => {
        console.log('Animation completed!');
    }
});
            

HTML Data Attributes

<div class="counter-value" 
     data-count="1500000"
     data-duration="3000"
     data-easing="bounce"
     data-decimals="1"
     data-abbreviate="true"
     data-currency="true"
     data-threshold="0.5">
  $0
</div>
            