Introducing <NumberFlow/> for React:.Transition, format, and localize numbers. Built on Intl.NumberFormat and Web Animations. Dependency-free. Accessible. Customizable.

RT @raunofreiberg: A year in the making, my interaction design manual is available today. With 20 chapters and 20 downloadable React compo….

NumberFlow can now be used as a custom element, with or without a framework 🙂.

RT @mattgperry: 🚀 Introducing <AnimateNumber />. A Motion+ React component for making beautiful number animations. Based on @MBarvian's Num….

Utterly surreal to see 𝕏 using NumberFlow. This site has been so important to me; I'm grateful I could give back even in a small way 🙏

So excited to announce I've joined @ClerkDev as a senior UI engineer. Can't wait to work on this beautiful product with people I've followed for years 🙂

Introducing <NumberFlow/> for @vuejs:.Transition, format, and localize numbers. Built on Intl.NumberFormat and Web Animations. Dependency-free. Accessible. Customizable. cc @youyuxi

Follow-up: it seems that the performance issues were related to mixing composited + non-composited animations, not the 3D stuff*.

Credit to @samselikoff for the digit looping logic 🙂

Vue and/or Svelte support should be coming soon 👋.

This is the successor to MotionNumber, rewritten to address tricky bugs and drop the dependencies. It should work just as well with Framer Motion and handle far more use cases 👍

For the curious, this is the 3d transform I was referring to. I wrapped the numbers in 3d space so I could rotateX the container and apply a bunch of composited WAAPI animations to handle interruptions. Any advice to get this working better in Chrome would be greatly appreciated

This slider is MotionNumber's final boss. The approach here worked well but relied on 3d transforms which seemed to trash performance in Chrome 🫤. Back to the drawing board

Which should be the default transition duration for MotionNumber? (Feel free to suggest an alternative 👋)

@k_grajeda @family Fav detail: it computes the nested border radii so they align during the transition

Pure CSS checkboxes are always fun:. Used @k_grajeda's tool to generate the easings: Inspired by @Family

Credit to @wickedmishra for the warning shake animation 👋

Framer Motion layout animations + `width: 0/auto` were perfect for recreating these legendary @Family animations by @lochieaxon:.

@lochieaxon feedback welcome! I thought layout animations would be the most performant way to handle this.

I'm throwing my hat in the ring here. (Framer Motion)