Forcing animation through all numbers

[kilokeith]

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]

Hi, not at the moment unfortunately. The continuous plugin should help slightly, e.g. <NumberFlow plugins={[continuous]} />, but it doesn't loop through every in-between number. I tested doing that at one point but there's no way to make it work with format={{ notation: 'compact' }} because Intl.NumberFormat return enough info there.

[kilokeith]

Oh, beautiful! That wasn't there last week when I was working on 0.2.0. That's a nicer effect for me. Thank you!

I had sidestepped it with an effect that continuously incremented the value with a delay, and divides the animation duration by the number of steps. But then only a linear ease did any good.

Basically

// fix percentages
const formattedValue = useMemo(() => (format === "percent" ? number / 100 : number), [format, number])

// hold the value to change so the animation plays out after delay
const [value, setValue] = useState(defaultValue)

// the animation duration will change if incrementing all numbers
const animationDurationValue = useMemo(
  () => (stepThroughAllDigits ? animationDuration / number : animationDuration),
  [stepThroughAllDigits, animationDuration, number],
)

useEffect(() => {
  // hold timeout to clear on unmount
  let timeout

  async function incrementalUpdate() {
    clearTimeout(timeout)
    // hold temp value to increment
    let tempValue = defaultValue
    // console.log("incrementing", tempValue, animationDurationValue)

    while (tempValue < number) {
      console.log("incrementing", tempValue, animationDurationValue)
      // increment the value by 4 or the remainder of number - tempValue
      tempValue += Math.min(stepValue, number - tempValue)
      if (format === "percent") {
        setValue(tempValue / 100)
      } else {
        setValue(tempValue)
      }
      // delay the next loop
      await delay(animationDurationValue)
    }
  }

  // if incrementing through all values, keep updating the value over time
  if (animate && stepThroughAllDigits) {
    timeout = setTimeout(incrementalUpdate, animationDelay)
  } else if (animate && animationDelay > 0) {
    // but if animation is enabled, set the value after the delay and let the library animate it
    timeout = setTimeout(() => setValue(formattedValue), animationDelay)
  } else {
    // otherwise skip ahead to the final value
    setValue(formattedValue)
  }
  // clear timeout on unmount
  return () => clearTimeout(timeout)
}, [
  number,
  formattedValue,
  format,
  animationDelay,
  animationDurationValue,
  defaultValue,
  animate,
  stepThroughAllDigits,
  stepValue,
])

That will make it look like it steps through every digit to wind up. Of course has its own drawbacks. I think continuous might just be what I'm looking for.

[barvian]

That's clever, thanks for sharing!

[LanderBeeuwsaert]

@barvian
In our team we have this feature request as well as mentioned here:
#139
We're using this implementation until now:
https://github.hubspot.com/odometer/
but this library has multiple improvements over it.
We'd be interested in helping out for this if you would point us in the right direction on your ideas of how this should be implemented, what files & so on to adapt.