Animate value changes with rolling digits
RollingNumber animates value changes with rolling digit transitions. Each digit independently rolls to its new position when the value changes.
Set prefix and suffix props to add static text before or after the animated number. Use thousandSeparator to separate thousands and decimalScale with fixedDecimalScale to control decimal formatting:
Control animation speed with animationDuration prop (in milliseconds, default is 600 ). Use timingFunction prop to change the CSS timing function (default is ease ):
Each animated digit is rendered as a stack of all possible values which is clipped to display only the current digit. To keep the hidden digits out of the clipboard, the animated part is not selectable: text selection is handled by a transparent copy of the formatted value rendered on top of the digits. Selecting and copying RollingNumber always produces the value as it is displayed, for example $ 1,234.56 USD .