Framer Tutorial: Creating A 3D Hover Effect
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create a 3D hover effect for your Framer website. I'll demonstrate creating a light that tracks the cursor, and I'll show you how to integrate a 3D hover effect into any element. Using this video, you'll be ready to apply a 3D hover effect to any component of your Framer website, without needing to write any code - just a little copying and pasting!
Remix the project: framer.university/resources/3...
Inspiration: Old Arc interface.
0:00 - Introduction
0:25 - Creating the card
4:43 - Creating a component
5:40 - Adding cursor follow override
7:25 - Adding 3D hover override
8:11 - Finished card design
8:26 - Final words
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Пікірлер: 38
No matter where I go for tutorials, I always find Nandy. You're awesome man ✌🏻
@framer.university
5 ай бұрын
Thanks man ✌️
Hi Nandi, Really love all the content you created! Looking forward to seeing more of your updates!
@framer.university
7 ай бұрын
Thank you so much! More to come :)
Good to see you again!
@framer.university
7 ай бұрын
thanks, mate! Weekly uploads are coming back :)
Great video Nandi! I'm gonna implement this to my website 🤩
@framer.university
7 ай бұрын
Thanks! :) Go for it!
It work well with any color. With black backgrounk is more easy to see this effect or we have the same result with any colors
Well done
@framer.university
7 ай бұрын
thank you! :)
hi Nandi! I tried replicating this concept, but I am getting this error in the return function for cursor follow code: animated.div' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'string' is not assignable to type 'Element'.(2786) (property) div: AnimatedComponent Can you help with the solution?
@chetnaya411
3 ай бұрын
Samer error here. You found a solution?
Which libs we can use like framer motion, what about just css animation?
how can i add a slower and smoother scroll. I have used speed animation for the whole project and everything brakes down.
In a grid layout, I cannot apply this effect to all cards without the layout falling appart and the effect not working anymore. Didn't dig into the code but it looks like it involves some kind of absolute positionning that messes up everything.
Hey, I have website in Framer. I am learning from here. But one I noticed is I think you should add how looks on Tablet or Mobile mode or how much time to load if use these types of elements with 3d effects? Because I used 3d effects first time but the site didn't load smoothly when I scroll I removed all the 3d effects or wasted more time to remove individually. @framer
Framer is also known for great effects. I attracted from this features but the thing is I can not use them because website didn't scroll smoothly, is the reason I use SVG images (Thumbnails)? Or any?
Does anybody know how to use Framer discount coupon for annual subscription?
Hi Nandi, Im wondering why I am unable to change the image when I exit the component and back to the normal canvas? I see you have the card component on the right with the option to upload another image, I dont see this option for mine?
More videos plz with code override and custom component. What's the differences between them?
@framer.university
7 ай бұрын
A code override is used to modify the functionality of an existing element on your canvas. On the other hand, a code component is a component that you can drag and drop onto your Framer canvas and use is as any other element.
Hi, very easy to use with already made code. I have a question, it is possible to use this effect for non-component element? For example a section with multiple frames and video background?
@framer.university
Ай бұрын
Yes you can apply this to any frame or element if you follow the steps carefully:)
I see that you put the pointer event to none. But what if I want a pointer event on a card? (like an info icon in the top right of this card or a CTA) I would like the spotlight to still remain but it always disappears when I hover over a potential pointer event. Do you have any solutions for that?
Great video, Nandi. However, when I implemented this effect on the component and previewed it, the entire component disappeared after a few seconds. Do you happen to know what the issue might be? Thanks for these kinds of videos.
@framer.university
6 ай бұрын
Thanks! I don’t know what’s the issue. Please send a remix link.
Great video Nandi! However, with Safari the behavior is not good, it looks strange. Your demo as well. Do you think this can be fixed or is it due to Safari? On Chrome it works great.
@framer.university
7 ай бұрын
Thank you so much! For me it looks great in Safari. Interesting.
Can't I do this on Webflow without code?
@framer.university
Ай бұрын
Not sure. I use Framer. But yeah, in Framer you can do this without any code. This is an older video. With the latest updates, you have the ability to do any 3D animation in Framer.
Hi! I have an issue with this, whenever I link this button to a certain page of url, the button tag of the accessibility just disappears. How can I maintain the button tag even if I link this component to other pages?
@framer.university
2 ай бұрын
Good question! Watch my latest video. It has a more flexible component that you can use to make this effect and also add link to the card.
How can I share or copy style guide like colors, shadows from one to other projects?
@framer.university
7 ай бұрын
you cannot copy and paste color styles to other projects unfortunately. You can right click and copy shadows tho.
@syed.simanta820
7 ай бұрын
@framer.university copy paste from one project to another?
Bro when you’re launching your framer course
@framer.university
7 ай бұрын
Hey! It is launching next year!