Animate part of the number

[e-Naeim]

is there a way to animate the number (e.g 111 => 112) so only last 1 becomes 2 instead of animating the whole number, because it doesn't make sense to animate numbers if they are not going to be changed.

is there a way to do that?

[acfuns]

pls use react-awesome-animated-number

[cgzirim]

@heyman333, can we get this please.

[4Michael1Angelo5]

Hello. I may have a solution. You need to change part of the code to this.

`

  {
    NUMBERS.map((number, numIndex) => (
                  <motion.div
                    style={{ ...fontStyle, fontVariantNumeric: 'tabular-nums' }}
                    key={numIndex}
                    initial="hidden"
                    variants={{
                      hidden: { y: 0 },
                      visible: {
                        y: -1 * (numberHeight * animateToNumbersArr[index]) -  numberHeight * 20,
                      },
                    }}
                    animate={controls}
                    transition={transitions?.(index)}
                  >
                    {number}
                  </motion.div>
                ))
  }

`

the key changes are this line: NUMBERS.map((number) => to NUMBERS.map((number, numIndex) => and then you need to change this line: from key = {keyCount.current++} to key={numIndex}

Hope that helps

I found that creating the keys using keyCount.current++ led to a lot of unintended behavior and introduced bugs

I forked an example I made earlier that displayed bugs. Interestingly, this fix also fixed the bugs and unintentionally changed the animation style. I think this is the animation style you are looking for.

https://stackblitz.com/edit/vitejs-vite-xcgycu?file=src%2FApp.jsx