How to reduce cutting edges

[stepan-twnty]

Hey

Currently, the animation is cutting in the edge of part="number" (check screenshot). I want to achieve the result where numbers should cutting immediately (check another screenshot I left a red line where I want to set a new edge for animation).

Maybe someone can help with it?

[barvian]

Hi 👋, you should be able to use the --number-flow-mask-height and --number-flow-mask-width CSS vars to achieve this. Here's a demo. Please let me know if that will work for you

[stepan-twnty]

Hey :)

Thx it helped but for my desired result I also use additional var '--number-flow-char-height': '0.8em',.

It works well but one issue was spotted with commas (check my screenshot the comma was cut with overflow: hidden container). So where I don't use commas I use '--number-flow-char-height': '0.8em', in all other cases I use '--number-flow-char-height': '1.03em' (I also have another idea for commas issues use NumberFlow for the first part number then use absolute span with a hardcoded comma and then use NumberFlow for number after commas but there is space for many nuances :D)

So thx @barvian for your help.