New digits appear suddenly when transition ends

[jonybekov]

Hi. Firstly, I really like the library, kudos to author! I tried it on my existing app, and when I do it, I get the following result: Watch the video here

Somehow, when value is updated, new digits appear suddenly when transition ends. Animation doesn't work like in the examples. Am I doing something wrong?

Here's the code that I'm using:

import MotionNumber from "motion-number";
import { easeOut } from "framer-motion";

export type Price = {
  amount: number;
  currency: string;
};

export function DisplayMoney({ value }: { value?: Price }) {
  return (
    <span className="no-wrap">
      <MotionNumber
        transition={{
          layout: { type: "spring", duration: 0.7, bounce: 0 },
          y: { type: "spring", duration: 0.7, bounce: 0.25 },
          opacity: { duration: 0.7, ease: easeOut, times: [0, 0.3] }, // 0.3s perceptual duration
        }}
        value={value ? value.amount : 0}
        format={{ notation: "standard" }}
        locales="tr-TR"
      />{" "}
      {value?.currency}
    </span>
  );
}

[barvian]

Hey, thanks for filing 👋. That is a gnarly bug. I'm actually working on a rewrite of the package in Vanilla JS/WAAPI instead of Framer Motion to address these types of issues. Would you mind trying the new package to see if it fixes this for you? It has a slightly different API; installation instructions and WIP docs can be found here: number-flow.barvian.me. Very open to feedback 🙂

[rortan134]

Hey, thanks for filing 👋. That is a gnarly bug. I'm actually working on a rewrite of the package in Vanilla JS/WAAPI instead of Framer Motion to address these types of issues. Would you mind trying the new package to see if it fixes this for you? It has a slightly different API; installation instructions and WIP docs can be found here: number-flow.barvian.me. Very open to feedback 🙂

Hey there, I tried it out and I keep getting TypeError: Cannot read properties of undefined (reading 'map') on number flow

new dt
node_modules/number-flow/dist/index.mjs (159:17)
new lt
node_modules/number-flow/dist/index.mjs (253:5)
set parts
node_modules/number-flow/dist/index.mjs (114:58)

[barvian]

Hey, thanks for filing 👋. That is a gnarly bug. I'm actually working on a rewrite of the package in Vanilla JS/WAAPI instead of Framer Motion to address these types of issues. Would you mind trying the new package to see if it fixes this for you? It has a slightly different API; installation instructions and WIP docs can be found here: number-flow.barvian.me. Very open to feedback 🙂

Hey there, I tried it out and I keep getting TypeError: Cannot read properties of undefined (reading 'map') on number flow

new dt
node_modules/number-flow/dist/index.mjs (159:17)
new lt
node_modules/number-flow/dist/index.mjs (253:5)
set parts
node_modules/number-flow/dist/index.mjs (114:58)

Hmm, I haven't seen that one before. Could you try reproducing it in this sandbox?

[barvian]

I just launched the rewrite that should fix this and other bugs. Please let me know if you're still experiencing issues 👋