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
Смотрите видео The Framer Motion Crash Course || React Animation Library 2023 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tom Is Loading 07 Октябрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 108,199 раз и оно понравилось 3.5 тысяч людям.