Create Awesome Card flip animation w/Framer-Motion | React.js

In this video you will learn to create an animation that allows you to have a card that can flip when clicked on. This uses React js, Vite, framer-motion, tailwind css, and classic css.
Images: drive.google.com/drive/folder...

[@user-bu7md2uq2m]

It is amazing that I can create cards, however I can not use a map loop to place more than one card-the second card overlaps the first card.

[@vison1452]

great videos!

[@WebChainDev]

Thanks!

[@vison1452]

@@WebChainDev gave u a sub. been learning how to make good looking animations for websites with framer motion

[@WebChainDev]

@@vison1452 thanks for the sub. I have been focusing on animations in my latest videos so you've come to the right place)

[@muhammad-shahin]

I follow your code but my card is flipping but not showing the back card it's just flipping the the front card how can I Fix this?

[@WebChainDev]

This is probably an issue with the css connecting. Here is a github gist with all the code so you can verify where the issue was: gist.github.com/Mif2006/6e672d296a0f46507d7423e62beb6562

[@RT-yg6ec]

why did we need to write the css if we repeated the animation code in motion.div? kind of confused sir

[@WebChainDev]

The animation code ensures the movement and the css the position. For example if we remove the css we would have 2 cards(the front and back) instead of 1 card with a front and a back