Tinder Style Swipe Cards with React & Framer Motion
Join my Framer Motion course waitlist https://www.blast.dev/ ✨
Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
The Tinder swipe gesture is one of most famous UI interactions of the last decade. Today, we'll learn how to recreate it with React, Framer Motion, and TailwindCSS.
📚 Project Links
Code: https://www.hover.dev/components/cards
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: https://linktr.ee/tomisloading
Portfolio templates: https://tomisloading.gumroad.com/
Website: https://www.hover.dev
Timeline:
0:00 - Introduction
0:24 - Basic layout and drag gesture
6:11 - Transform and dismiss
13:26 - Adding some polish