The Framer Motion Crash Course || React Animation Library 2023

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev Framer Motion is not only the simplest way to get up and running with animations in React JS, but also one of the most powerful. Trust me, I love it so much that I built an entire component library using it! Today we're going to cover everything you need to go from "zero to hero". Your limitations are seriously just your imagination. If there's anything I haven't covered in this video that you'd like me to cover, please don't hesitate to ask! I'm happy to do more break downs! 📚 Project Links Code: https://github.com/TomIsLoading/framer-motion-crash-course/tree/main Docs: https://www.framer.com/motion/ 🔗 My Links TikTok: https://www.tiktok.com/@tomisloading Instagram: https://www.instagram.com/tomisloading/ GitHub: https://github.com/TomIsLoading Twitter: https://twitter.com/TomIsLoading Discord & more: https://linktr.ee/tomisloading Portfolio templates: https://tomisloading.gumroad.com/ Website: https://www.hover.dev Timeline: 0:00 - Introduction 0:31 - Prerequisites to using Framer Motion 3:44 - Project setup & overview 5:33 - The "motion" component 11:34 - AnimatePresence & the exit prop 19:45 - Gestures (whileHover & whileTap) 25:44 - useAnimationControls 32:52 - View based animations (whileInView & useInView) 40:16 - Scroll based animations (useScroll, useSpring & useTransform) 50:44 - Wrapping up