The counter() effect smoothly counts from one number to another using requestAnimationFrame with configurable easing. Supports thousands separators, prefixes, suffixes, decimals, and scroll-triggered activation.

// Count from 0 to the number in the element
Domma.effects.counter('.stat-number');

// With full formatting
Domma.effects.counter('.revenue', {
  from: 0,
  to: 1250000,
  duration: 3000,
  separator: ',',
  prefix: '$',
  decimals: 2,
  easing: 'ease-out'
});

// Scroll-triggered
Domma.effects.counter('.stat', {
  trigger: 'scroll',
  threshold: 0.5
});

Click to animate stat counters with staggered timing.

Domma.effects.counter('.stat-number', {
  duration: 2000,
  stagger: 200,
  separator: ','
});

Add currency symbols, percentage signs, and other formatting.

Domma.effects.counter('#revenue', {
  to: 84750, prefix: '$', separator: ','
});

Domma.effects.counter('#percent', {
  to: 98.7, suffix: '%', decimals: 1
});

Domma.effects.counter('#temp', {
  to: 23.5, suffix: '°C', decimals: 1
});

Compare different easing functions counting to 1,000.

Domma.effects.counter('#linear', { to: 1000, easing: 'linear', duration: 3000 });
Domma.effects.counter('#easeout', { to: 1000, easing: 'ease-out', duration: 3000 });
Domma.effects.counter('#easeinout', { to: 1000, easing: 'ease-in-out', duration: 3000 });

These counters start when they scroll into view. Scroll down if they haven't started yet.

Domma.effects.counter('.counter-scroll', {
  trigger: 'scroll',
  threshold: 0.5,
  stagger: 150,
  separator: ','
});

Count with decimal places for financial or scientific data.

Domma.effects.counter('#counter-decimal', {
  to: 42867.53,
  prefix: '$',
  decimals: 2,
  separator: ',',
  duration: 2500
});