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/frame...
Docs: https://www.framer.com/motion/

🔗 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: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