Awwwards Winning SVG Line Animations with Motion for React
Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
Underlines are lame! Thats why today we'll learn how to make custom, hand drawn SVG lines and circles which draw themselves in while in view using React, Tailwind CSS, and Motion for React (formerly Framer Motion).
📚 Project Links
Source code: https://www.hover.dev/components/text
inspo: https://cheifs.com/
Motion for React: https://motion.dev/docs
🔗 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/
Timeline:
0:00 - Introduction
0:08 - Designing the SVG
1:57 - Positioning the line
3:36 - Animating the line