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
Watch video The Framer Motion Crash Course || React Animation Library 2023 online without registration, duration hours minute second in high quality. This video was added by user Tom Is Loading 07 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 108,199 once and liked it 3.5 thousand people.