Stepper with negative values and trend=true

[lumpinif]

test using baisc zustand implementation with nextjs 14:

 export function CounterDisplay() {
  const { count } = useStore();

  return (
    <div className="flex items-center justify-center rounded-lg p-1 text-2xl">
      <NumberFlow
        willChange
        aria-hidden
        trend={true}
        value={count}
        className="pointer-events-none"
      />
    </div>
  );
}

bug recreation codesandbox demo: https://codesandbox.io/p/devbox/pk6p4q

The problem I just encountered with the newest package "0.2.5" was the inconsistency of the default trend. It shows correct up or down when the number is increasing or otherwise when the number is positive, however whenever the number is negative the trend seems break.

Recording.2024-10-23.223840.mp4

[barvian]

Hi 👋, thanks for the sandbox. Here's a quick fork that I think is more what you're looking for?

I wasn't sure how to handle this case in the core package because I feel like it doesn't generalize, but I'm open to suggestions.

[lumpinif]

Hi 👋, thanks for the sandbox. Here's a quick fork that I think is more what you're looking for?

I wasn't sure how to handle this on the library level because I feel like it doesn't generalize, but I'm open to suggestions.

I appreciate and 100% love the efficiency you got!

The implementation is very nice and it seems like it's something that the trend should be to me, while I might adjust the direction inversely for negatives for a more natural feeling.

[barvian]

Sweet! I'll think about what an API for this could look like and leave this open as a discussion for visibility 👋

[lumpinif]

cool!

[barvian]

I just pushed an update which should simplify this. You can now add the prop:

<NumberFlow
  trend={(oldValue, value) => Math.sign(Math.abs(value) - Math.abs(oldValue))}
/>

to get this behavior.

[lumpinif]

Thank you for your work man! LGTM!

video:
https://github.com/user-attachments/assets/a43cdd4e-2e1e-480b-bed7-e0b787605fab

However I have noticed when 0->-1 is always 1, and the animation is going up, but shouldn't it be -1 since -1 is < 0?

[lumpinif]

but if I make it to -1 for 0 -> -1, the animation does not seem to be working correctly, as it goes all around the wheels.

[barvian]

Hi, this is because the order of the numbers in each stack is always

0
1
2
...

so to move downward (trend = -1) from 0 → -1, it has to loop around. It'd be nice in this case to flip the order of the numbers when the value becomes negative, but that seems super complex to do in the middle of multiple Web Animations 🤔

[lumpinif]

hey, Bravian. I totally get it.
I have tried everything I could from the implementation only, but I have also figured out there should be something really complex about the animation.