One of the reasons I got into design engineering was Family. The first time I used the app I was blown away by the attention to detail and the user experience. I decided to re-create a couple of the components from the app on the web.
The number animation in this component uses Number Flow and shared layout animations from Motion. The text formatting is handled using react-number-format.
The Use Max / Using Max transition is done by splitting the words into individual spans and animating them using Motion. Thanks to Janum Trivedi for the tip regarding the transition. Adding an x translate made a pretty big difference in how the interaction feels.
Keep in mind that this is only a prototype showcasing some of the interactions, rather than a fully built out feature. There is some functionality missing, such as navigating with arrow keys in the input field, the ability to edit the values in the middle of the input field and a couple more.
I've also come to the conclusion that some of the interactions wouldn't work as well on the web. The nature of how the values are input is different on mobile, because Family is a mobile app.
Each wallet cards has 3 different states, collapsed, default and expanded. The transition between these states is animated using unique layoutId for each wallet. I also wrote an article explaning how this interaction was built in detail.
This interaction effectively uses the same principle as the wallets interaction. It is comprised of two states; one where the stack is collapsed and one where it's expanded. The components that I want to animate between are then are then tied using layoutId.
This interaction is quite simple to create, it only animates the y position values and scale.
Vitalik
Vitalik
Vitalik
VitalikThe biggest challenge with this animation is orchestrating everything together to make the animation feel good. The properties that are animated are scale, opacity, and Y position. The x icon animation is done using pathLength.
Finally, these animations are in no way affiliated with Family. These are all explorations, focused on how some of these interactions might've been built.
Re-creating these components served as a great learning experience. I'm personally a huge Family fan, and I consider the app to be one of the best consumer apps out there. All of the credit for the original animations goes to the Family team.