This 3D Hover Will Make Your Portfolio Stand Out (Framer Tutorial)
🎓 Framer University: https://frameruni.link/yt
👉 Create a free Framer account: https://framer.university/free-account
In this Framer tutorial, you'll learn to create a captivating 3D hover reveal component without coding. I'll guide you through using variants, components, interactions, and variables to build an impressive project card effect. You'll master 3D transforms, hover states, and mobile optimization, adding an eye-catching element to your portfolio that's sure to impress.
👉 Remix the tutorial project: https://framer.university/resources/3...
3D Transforms Crash Course:
https://framer.university/lessons/fra...
Framer Components Masterclass:
https://framer.university/lessons/com...
0:00 - Introduction
0:30 - Project remix
0:52 - Setting up the basic structure
4:10 - Adding 3D to the card
8:07 - Creating a component
10:51 - Mouse enter/leave interactions
12:20 - Working with component variables
16:09 - Changing opacity of other cards on hover
21:17 - Optimizing it for mobile
21:09 - Optimizing for breakpoints using variants
22:34 - Using component variables
25:10 - Additional resources
Follow me on:
X: https://x.com/learnframer
Instagram: / framer.university
Смотрите видео This 3D Hover Will Make Your Portfolio Stand Out (Framer Tutorial) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Framer University 13 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 8,606 раз и оно понравилось 417 людям.