SwiftUI-style per-character slide animation for the web · GitHub
<!-- 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