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
Watch video This 3D Hover Will Make Your Portfolio Stand Out (Framer Tutorial) online without registration, duration hours minute second in high quality. This video was added by user Framer University 13 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,606 once and liked it 417 people.