NumericText.js

SwiftUI-style per-character slide animation for the web · GitHub

Counter integer · monospace
Price integer · proportional
Decimal π ↔ e
Japanese string
Usage
<!-- CDN -->
<script type="module">
  import NumericText from 'https://cdn.jsdelivr.net/gh/igarinpiano/numeric-text-animation/src/index.js';

  const nt = new NumericText('#price', {
    type:    'integer',
    bounce:  true,      // false → ease only
    stagger: 40,        // ms delay per digit (left→right)
    pre:     '¥',
  });

  nt.set(2980);   // first call — no animation
  nt.set(14800);  // animated
</script>
<!-- data attributes: auto-init -->
<span data-nt="integer" data-nt-pre="¥">2980</span>
<script type="module">
  import NumericText from '...';
  NumericText.autoInit('[data-nt]');
</script>
// MutationObserver — animate on any textContent change
NumericText.observe('#counter', { bounce: true });
document.querySelector('#counter').textContent = '14800'; // → animated