Component

Family Wallets Interaction in Framer

This is a Framer recreation of Jakub Krehel's recreation of the Family wallets interaction. Remix it or explore how this interaction is built entirely in Framer—without any code.

Created by

Nandi

Jakub

and

Prianca

About the resource

To create this interaction, I set up five variants: one default and four for each card's expanded state.

In the primary variant, all cards are in their default state, stacked in a grid. In the other four variants, one card is set to the expanded state while the remaining three cards are collapsed. The expanded card is positioned absolutely, while the collapsed cards are positioned relatively. This approach is consistent across all four variants.

The text and button that appears in the expanded state of each card is initially positioned absolutely and set to opacity 0 in the default state. When the card transitions to the expanded state, the text switches to relative positioning.

Finally, I added click interactions to allow smooth transitions between the default, expanded, and collapsed states across all variants. That’s it!

Multiple views of a digital wallet interface showing account details, transaction options, and fund management for 'Prianca' with ETH balances across different accounts — The five variants (one primary and one for each card) of the wallet component.

Family Wallets Interaction in Framer

About the resource

Learn the fundamentals of Framer for free.

More resources