Basic Number Ticker

1"use client"
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useImperativeHandle,
8  useState,
9} from "react"
10import {
11  animate,
12  AnimationPlaybackControls,
13  motion,
14  useMotionValue,
15  useTransform,
16  ValueAnimationTransition,
17} from "motion/react"
18 
19import { cn } from "@/lib/utils"
20 
21interface NumberTickerProps {
22  from: number // Starting value of the animation
23  target: number // End value of the animation
24  transition?: ValueAnimationTransition // Animation configuration, refer to motion docs for more details
25  className?: string // additionl CSS classes for styling
26  onStart?: () => void // Callback function when animation starts
27  onComplete?: () => void // Callback function when animation completes
28  autoStart?: boolean // Whether to start the animation automatically
29}
30 
31// Ref interface to allow external control of the animation
32export interface NumberTickerRef {
33  startAnimation: () => void
34}
35 
36const NumberTicker = forwardRef<NumberTickerRef, NumberTickerProps>(
37  (
38    {
39      from = 0,
40      target = 100,
41      transition = {
42        duration: 3,
43        type: "tween",
44        ease: "easeInOut",
45      },
46      className,
47      onStart,
48      onComplete,
49      autoStart = true,
50      ...props
51    },
52    ref
53  ) => {
54    const count = useMotionValue(from)
55    const rounded = useTransform(count, (latest) => Math.round(latest))
56    const [controls, setControls] = useState<AnimationPlaybackControls | null>(
57      null
58    )
59 
60    // Function to start the animation
61    const startAnimation = useCallback(() => {
62      if (controls) controls.stop()
63      onStart?.()
64 
65      count.set(from)
66 
67      const newControls = animate(count, target, {
68        ...transition,
69        onComplete: () => {
70          onComplete?.()
71        },
72      })
73      setControls(newControls)
74    }, [])
75 
76    // Expose the startAnimation function via ref
77    useImperativeHandle(ref, () => ({
78      startAnimation,
79    }))
80 
81    useEffect(() => {
82      if (autoStart) {
83        startAnimation()
84      }
85      return () => controls?.stop()
86    }, [autoStart])
87 
88    return (
89      <motion.span className={cn(className)} {...props}>
90        {rounded}
91      </motion.span>
92    )
93  }
94)
95 
96NumberTicker.displayName = "NumberTicker"
97 
98export default NumberTicker
99 
100// Usage example:
101// To start the animation from outside the component:
102// 1. Create a ref:
103//    const tickerRef = useRef<NumberTickerRef>(null);
104// 2. Pass the ref to the NumberTicker component:
105// … truncated