Hey there!
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
Let's begin!
The first step is the setup. This is the stack I used:
- Create-React-App
- Typescript
- TailwindCSS
- Framer-Motion (Animations)
- Poppins Font
Highlighted code
The component is not complicated, although there are some parts that need to be clarified:
- The
AnimatePrescence
it'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
await
instead of usingthen
. Nesting all the animations will be a living hell!!
await bottomTexts.start("close");
await bottomButtons.start("close");
await bottomContainerControls.start("close");
- There are
timeouts
in the open and close functions. The reason is to avoid some animation issues while changing theflex-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.
The result
Here's the full solution. Feel free to fork and work on it!
Top comments (0)