Tools I use: Figma, Claude, Paper, Motion, Tailwind CSS, Swift
PG Gonni
Forlì: 44.2093° N, 12.0673° EMontréal: 45.4905° N, 73.5587° W

PG Gonni

Design Engineer

Experiment

Transaction status button

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



Based on Family by Benji Taylor.

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, 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