barvian / number-flow

A component to transition, format, and localize numbers.
https://number-flow.barvian.me
MIT License
4.71k stars 75 forks source link

Forcing animation through all numbers #33

Closed kilokeith closed 1 month ago

kilokeith commented 1 month ago

Is there a good way to force animations to go through all the digits, or a somehow manage a series of points smoothly through the final number?

What I'm getting at is that for a number like 9000, the 0s would not really animate and it feels boring until you get to the 9. 0->000->9000 0->0001->0009->etc would look cooler. Manually updating the value to step through numbers is doable, though slow. Just wondering if there's a clever solve to make it look more dramatic.

Thanks! Loving the package.

barvian commented 1 month ago

Hi, not at the moment unfortunately. The continuous prop should help slightly, e.g. <NumberFlow value={} continuous />, but it doesn't loop through every in-between number. I tested doing that at one point but it starts looking really bad if the numbers are more than 40+ apart. To address that I think it'd need an actual spring generator which I haven't quite committed to, but I could see it being an optional add-on in the future... Curious to hear your thoughts 🤔