Twitter's "Popular" interaction — the way a tweet expands to show engagement metrics with that satisfying pull — is one of those small UX moments that people remember. I recreated it in Rive to understand the mechanics.
The interaction looks simple but has layered timing. The content expands, the metrics fade in with a stagger, the background shifts opacity, and there's a subtle parallax between the text and the engagement bar. All of this happens in about 350ms.
State machine approach — one trigger input drives the entire sequence. Rive's timeline blending handles the staggered reveals, so I didn't need separate timelines for each element.
Easing matters — Twitter uses a custom cubic-bezier for the expand animation. Getting this right was the difference between "close enough" and "that's it." I ended up with something like (0.25, 0.8, 0.25, 1) — fast in, gentle settle.
The parallax — the engagement metrics move at 80% of the content's expansion speed. This tiny offset creates depth without any actual 3D. It's a 2D trick that feels spatial.
Recreating existing interactions is underrated as a learning tool. You think you understand how something works until you try to build it — then you discover the ten micro-decisions that make it feel right.
Rive — state machine, timeline blending, custom easing curves