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 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 timeouts in 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.

The result

Here's the full solution. Feel free to fork and work on it!