React + Framer Motion Animated Card
In this React tutorial, we'll be building a responsive and animated card component. The card component can also be expanded by clicking on it.
To help us build complex and fluid animations, we'll use the Framer Motion library!
We will also explore some useful CSS styling and tricks.
🕑 Timeline
0:00:00 What We’ll Be Building
0:01:00 Setup
0:03:54 Listing Component
0:26:24 Overlay Component
0:33:36 Modal Component
0:56:06 Animations
1:08:35 Conclusion
💻 Source Code
https://github.com/DLabbate/react-exp...
🔗 Google Fonts
https://fonts.google.com/
🔗 Framer Motion (Homepage)
https://www.framer.com/motion/
🔗 Framer Motion (API Documentation)
https://www.framer.com/docs/
🔗 Aspect Ratio Boxes
https://css-tricks.com/aspect-ratio-b...
🔗 React Icons
https://react-icons.github.io/react-i...