[FEATURE] Animating pure data like Number, string, obj etc.

...
<motion.div>
{num}
</motion.div>

How may I animating { num } from 0 to 100 in 1s?
Is there an existing api to manipulate? please help.

[mc-petry]

It’s easy to write something like:

function NumberAnimation() {
  const _content = useRef<HTMLDivElement>(null)
  const handleUpdate = useCallback((v: { to: number }) => {
    _content.current!.innerText = v.to.toFixed()
  }, [])

  return <motion.div
    ref={_content}
    animate={{ from: 0, to: 100 }}
    onUpdate={handleUpdate}
  />
}

[mattgperry]

You can use animate to perform arbitrary animations.