Skip to content

Instantly share code, notes, and snippets.

@amcdnl
Created April 13, 2022 13:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amcdnl/e6b1dbd4e7462093522ccc9660502372 to your computer and use it in GitHub Desktop.
Save amcdnl/e6b1dbd4e7462093522ccc9660502372 to your computer and use it in GitHub Desktop.
import { animate } from "framer-motion";
import React, { useEffect, useRef } from "react";
function Counter({ from, to }) {
const ref = useRef();
from https://stackoverflow.com/questions/65013742/how-to-animate-number-with-framer-motion
useEffect(() => {
const controls = animate(from, to, {
duration: 1,
onUpdate(value) {
ref.current.textContent = value.toFixed(1);
}
});
return () => controls.stop();
}, [from, to]);
return <p ref={ref} />;
}
export default function App() {
return <Counter from={0} to={65.4} />;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment