Last month, I was assigned to create an expandable component at work, something that could be repeatable, and it should show/hide more data on click. Something easy to achieve by using hooks, the old show and hide game! But, my inner designer couldn't resist the temptation of animating it. And now, I'll just show you how the results!
Design by Thremulant
The first step is the setup. This is the stack I used:
- Framer-Motion (Animations)
- Poppins Font
The component is not complicated, although there are some parts that need to be clarified:
AnimatePrescenceit's wrapping only the bottom content of the card. The reason is that those are the only pieces that are unmounted.
- Components like this one, are the reason why I prefer to use
awaitinstead of using
then. Nesting all the animations will be a living hell!!
await bottomTexts.start("close"); await bottomButtons.start("close"); await bottomContainerControls.start("close");
- There are
timeoutsin the open and close functions. The reason is to avoid some animation issues while changing the
flex-direction. Without them, the image's width will only grow to a third of the card, stop, and then re-start the animation to get the full width.
Here's the full solution. Feel free to fork and work on it!