CSS Issue: fontWeight disturb animation

[alexabidri]

Hey guys!

When I am setting the animation with this following pattern:

<AnimatedNumbers animateToNumber={cartTotal} fontStyle={{ fontSize: 16, letterSpacing: 0, fontWeight: 600 }}></AnimatedNumbers>;

The first time the component animates and render 0, the rendering got stuck between two numbers. ⚠️

It works fine if i dont mention the fontWeight

<AnimatedNumbers animateToNumber={cartTotal} fontStyle={{ fontSize: 16, letterSpacing: 0 }}></AnimatedNumbers>;

Any clues? Thanks everyone

[heyman333]

@alexabidri really sorry for late reply. I will check it as soon as possible

[Mako-L]

The spinning is affected even if the font-weight is in the CSS file. I need guidance here. Do you guys know how to fix it or what file I should look into more precisely to fix this?

[Mako-L]

Hey guys!

When I am setting the animation with this following pattern:

<AnimatedNumbers animateToNumber={cartTotal} fontStyle={{ fontSize: 16, letterSpacing: 0, fontWeight: 600 }}></AnimatedNumbers>;

The first time the component animates and render 0, the rendering got stuck between two numbers. ⚠️

It works fine if i dont mention the fontWeight

<AnimatedNumbers animateToNumber={cartTotal} fontStyle={{ fontSize: 16, letterSpacing: 0 }}></AnimatedNumbers>;

Any clues? Thanks everyone

<div
  key={index}
  style={{
    height: numberHeight,
    width: numberWidth,
    overflow: "hidden",
  }}
>
<Spring
  key={`${keyCount.current++}`}
  from={{
    transform: "translateY(0px)",
  }}
  to={{
    transform: `translateY(${
      -1 * numberHeight * animateToNumbersArr[index]
    }) translateX(${-0.5 * numberWidth})`,
  }}
  config={setConfig(configs, n, index)}
  delay={index * 150}
>
  {(props) =>
    NUMBERS.map((number, i) => (
      <animated.div
        key={i}
        style={{
          ...fontStyle,
          ...props,
          height: numberHeight,
          width: numberWidth,
        }}
      >
        {number}
      </animated.div>
    ))
  }
</Spring>
</div>

const numberDivRef = React.useRef(null);

React.useEffect(() => {
  const height = numberDivRef.current.getClientRects()?.[0]?.height;
  const width = numberDivRef.current.getClientRects()?.[0]?.width;
  if (height && width) {
    setNumberHeight(height);
    setNumberWidth(width);
  }
}, [animateToNumber, fontStyle]);

<div
  ref={numberDivRef}
  style={{ position: "absolute", top: -9999, ...fontStyle }}
>
  {0}
</div>

Solution is to adjust the transform value used in the to prop of the Spring component. Instead of using a fixed value for the translateY transform, you can use a dynamic value that is based on the number being animated. For example, you can use the numberHeight and numberWidth variables to calculate the vertical and horizontal offsets for each number, and then use these values to position the numbers correctly.

Note that in this example, the translateX transform is being used to horizontally center the numbers within their container. This should help to prevent the numbers from overlapping at the end of the animation.

[heyman333]

@Mako-L Thank you for your wonderful solution! Why don't you make pull-request?

[Mako-L]

I did make one. It just has the code formated and didnt get accepted and i didnt had time to make a version where is not yet.

You said:

It's hard to know the code changes 😹
Can you simply re-commit your code changes without formatting the code?

thank you so much for your interest

[venkatesh1146]

@heyman333 I really greatful for the library, but it would be better if we can fix this. This issue is occuring even when I am not using custom font-weight.

@Mako-L it would be great if you can able to make the changes for the pr and get it merged.

[Mako-L]

@heyman333 I really greatful for the library, but it would be better if we can fix this. This issue is occuring even when I am not using custom font-weight.

@Mako-L it would be great if you can able to make the changes for the pr and get it merged.

Are you using the latest version? Also I remade the pr request and tested on mine and it worked all fine. Lmk.

[venkatesh1146]

Yes I update to v0.17.1 and tried. Still the issue persists.

[Mako-L]

Try the last version and tell me if the same issue occurs.

[venkatesh1146]

Hi @Mako-L @heyman333

I have updated the version "react-animated-numbers": "^0.18.0" Still it is same. This is happening sometimes only not everytime.

I am using "next": "12.3.1", "react": "18.2.0",