Density

NumberAnimation

NumberAnimation renders a number immediately by default. Set animate to count from zero to value in less than a second when the component mounts. Change animationKey to replay an enabled animation.

0
import { Button, NumberAnimation, View } from "density-base-ui";
import { RefreshCw } from "lucide-react";
import { useState } from "react";

export default function NumberAnimationExample() {
  const [animationKey, setAnimationKey] = useState(0);

  return (
    <View>
      <NumberAnimation animationKey={animationKey} animate value={97} />
      <Button onClick={() => setAnimationKey((key) => key + 1)}>
        <RefreshCw aria-hidden="true" size={14} />
        Replay animation
      </Button>
    </View>
  );
}