Skip to content
Craft•

Transaction status button

A status button that morphs between states without the text going jelly.

Analyzing Transaction

Based on Family (opens in new tab) by Benji Taylor (opens in new tab).

In my first attempt the text had a "jelly" effect, particularly when animating between the "Analyzing" and "Success" states.

Thankfully I had recently read about how Motion's "magic" layout property works (opens in new tab), which made it clear that this was caused by the text trying to transform from one string to the next.

The fix was simply to add a unique key to the text for each state, which ensures only the button magically transforms between states, while the label simply translates on the x axis and fades in and out.

  • motion
  • layout
  • tailwind
  • react