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

  • @mortezaajidanpour9381
    @mortezaajidanpour93815 ай бұрын

    No matter where I go for tutorials, I always find Nandy. You're awesome man ✌🏻

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks man ✌️

  • @renee2524
    @renee25247 ай бұрын

    Hi Nandi, Really love all the content you created! Looking forward to seeing more of your updates!

  • @framer.university

    @framer.university

    7 ай бұрын

    Thank you so much! More to come :)

  • @user-gb4rv6vi4q
    @user-gb4rv6vi4q7 ай бұрын

    Good to see you again!

  • @framer.university

    @framer.university

    7 ай бұрын

    thanks, mate! Weekly uploads are coming back :)

  • @michaelbruzzese
    @michaelbruzzese7 ай бұрын

    Great video Nandi! I'm gonna implement this to my website 🤩

  • @framer.university

    @framer.university

    7 ай бұрын

    Thanks! :) Go for it!

  • @FloNocode
    @FloNocode7 ай бұрын

    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

  • @ONLYFRAMER-qw3qg
    @ONLYFRAMER-qw3qg7 ай бұрын

    Well done

  • @framer.university

    @framer.university

    7 ай бұрын

    thank you! :)

  • @apoorvaagarwal6051
    @apoorvaagarwal60515 ай бұрын

    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

    @chetnaya411

    3 ай бұрын

    Samer error here. You found a solution?

  • @syed.simanta820
    @syed.simanta8207 ай бұрын

    Which libs we can use like framer motion, what about just css animation?

  • @razvanmuresan6683
    @razvanmuresan66837 ай бұрын

    how can i add a slower and smoother scroll. I have used speed animation for the whole project and everything brakes down.

  • @TheBackwasher
    @TheBackwasher5 ай бұрын

    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.

  • @rinkeshvaya
    @rinkeshvaya7 ай бұрын

    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

  • @rinkeshvaya
    @rinkeshvaya7 ай бұрын

    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?

  • @another.designer
    @another.designer7 ай бұрын

    Does anybody know how to use Framer discount coupon for annual subscription?

  • @TF1411
    @TF14115 ай бұрын

    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?

  • @syed.simanta820
    @syed.simanta8207 ай бұрын

    More videos plz with code override and custom component. What's the differences between them?

  • @framer.university

    @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.

  • @richdem1323
    @richdem1323Ай бұрын

    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

    @framer.university

    Ай бұрын

    Yes you can apply this to any frame or element if you follow the steps carefully:)

  • @asterix1124
    @asterix11243 ай бұрын

    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?

  • @shorts8521
    @shorts85216 ай бұрын

    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

    @framer.university

    6 ай бұрын

    Thanks! I don’t know what’s the issue. Please send a remix link.

  • @LejonetJanne
    @LejonetJanne7 ай бұрын

    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

    @framer.university

    7 ай бұрын

    Thank you so much! For me it looks great in Safari. Interesting.

  • @OnurOzalp-personal
    @OnurOzalp-personalАй бұрын

    Can't I do this on Webflow without code?

  • @framer.university

    @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.

  • @YunheeJung-lz4go
    @YunheeJung-lz4go2 ай бұрын

    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

    @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.

  • @syed.simanta820
    @syed.simanta8207 ай бұрын

    How can I share or copy style guide like colors, shadows from one to other projects?

  • @framer.university

    @framer.university

    7 ай бұрын

    you cannot copy and paste color styles to other projects unfortunately. You can right click and copy shadows tho.

  • @syed.simanta820

    @syed.simanta820

    7 ай бұрын

    @framer.university copy paste from one project to another?

  • @kalbehaiderakram4700
    @kalbehaiderakram47007 ай бұрын

    Bro when you’re launching your framer course

  • @framer.university

    @framer.university

    7 ай бұрын

    Hey! It is launching next year!