Animated Numbers

Free

Number Animation transitions with effects, often changing values smoothly for visual engagement on interfaces.

9999

How to use

1.Create a new code override file in Framer.

2.Inside the newly created override file, replace the override logic with this code.

import type { ComponentType } from "react"
import { useState, useRef, useEffect } from "react"
import { animate, useInView } from "framer-motion"
// Learn more: https://www.framer.com/docs/guides/overrides/

/*
StartingNumber : the number from which you want animation to start and 
EndingNumber you want animation to complete
 */
const StartingNumber = 9999
const EndingNumber = 0

/*
if repeat === false animation only occur once
*/
const Repeat = true
/*
how much duration in sec animation should complete
*/

const duration = 4
/* Easing types are 
anticipate
backIn/backOut/backInOut
circIn/circOut/circInOut
easeIn/easeOut/easeInOut
*/
const easing = "easeInOut"
export function withAnimatedNumber(Component): ComponentType {
    return (props) => {
        const ref = useRef()
        const isInView = useInView(ref, { once: !Repeat })
        const [number, setNumber] = useState(StartingNumber.toString())
        useEffect(() => {
            if (isInView) {
                animate(StartingNumber, EndingNumber, {
                    duration,
                    ease: easing,
                    onUpdate: (val) => {
                        const valueToInteger = parseInt(val.toString())
                        const valueToString = valueToInteger.toString()
                        setNumber(valueToString)
                    },
                })
            }
        }, [isInView])
        return <Component {...props} ref={ref} text={number} />
    }
}

function addCommasToNumber(numberString) {
    return numberString.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

export function withAnimatedNumberCommas(Component): ComponentType {
    return (props) => {
        const ref = useRef()
        const isInView = useInView(ref, { once: !Repeat })
        const [number, setNumber] = useState(StartingNumber.toString())
        useEffect(() => {
            if (isInView) {
                animate(StartingNumber, EndingNumber, {
                    duration,
                    ease: easing,
                    onUpdate: (val) => {
                        const valueToInteger = parseInt(val.toString())
                        const valueToString = addCommasToNumber(
                            valueToInteger.toString()
                        )
                        setNumber(valueToString)
                    },
                })
            }
        }, [isInView])
        return <Component {...props} ref={ref} text={number} />
    }
}

Apply the code override to text layer which you want to animate.