customization while incrementing/decrementing a single number

[OrinShazo]

hey, when incrementing the animateToNumber value, I wanna be able to edit the animation so the scrolling goes up as much as it needs to, for an example, when my initial value is 1 and i change it to 2, it goes goes through 1 - 10 twice until it reaches the number 2...

is there a way i can customize it so it goes up only by one number? thank you in advance :)

[101budspencer]

found a solution?

[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