Top 6 CSS Tips You NEED Before Building UI Animations

Published: 19 August 2024
on channel: Tom Is Loading

4,122

237

Framer Motion course waitlist ✨ https://www.blast.dev

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev

Sometimes making the animation isn't the hard part. Making the LAYOUT is the hard part. That's why today we're going to go over 6 CSS techniques I use every day when building UI animations.

📚 Project Links
All components shown: https://www.hover.dev/components

🔗 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:28 - Advanced absolute positioning
2:40 - Hooking into position sticky
4:39 - The CSS calc function
7:45 - Go deep on transforms
11:29 - z-index and stacking context
13:42 - Negative margins can be useful

Watch video Top 6 CSS Tips You NEED Before Building UI Animations online without registration, duration hours minute second in high quality. This video was added by user Tom Is Loading 19 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,122 once and liked it 237 people.

1,011