Framer University
Framer University
  • 124
  • 1 305 110
creating a useless magnetic hover effect for a website
✔︎ Framer University: frameruni.link/yt
✔︎ Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create a useless magnetic hover effect for your websites. Inspired by the Luma website and iPad cursor pointer, I felt the urge to create a similar magnetic hover effect in Framer. In this video, I'll walk you through how the component works and how you can put it into practice to create something useless but fun. :)
→ Remix the tutorial project: framer.university/resources/magnetic-hover-component-for-framer
→ Luma Dream Machine website: lumalabs.ai/dream-machine
→ Video about iPadOS pointer: (at 4min 15sec) developer.apple.com/videos/play/wwdc2020/10640/
0:00 Introduction
3:15 Creating the Effect
7:56 Optimizing
8:40 Turning It into a Component
14:42 Additional Resources
Follow me on:
X: learnframer
Instagram: framer.university
มุมมอง: 1 582

วีดีโอ

Roasting My Subscribers’ Framer Websites (Part 4)
มุมมอง 2.4K12 ชั่วโมงที่ผ่านมา
✔︎ Framer University: frameruni.link/yt ✔︎ Create a free Framer account: framer.university/free-account In this video, I'll review and constructively critique some Framer websites created by my subscribers. Beyond just pointing out areas for improvement, I'll dive into the actual project files to demonstrate specific solutions. → Site 01: anuragchalla.framer.website/ → Site 02: opticedge.framer...
My Developer Was Crying So I’m Making This Without Any Code
มุมมอง 2.6K21 ชั่วโมงที่ผ่านมา
✔︎ Framer University: frameruni.link/yt ✔︎ Create a free Framer account: framer.university/free-account In this Framer tutorial, I'll show you why working with developers shouldn't limit your creative ideas. When designers can bring their concepts to life independently, it opens up a whole new world of possibilities. We'll put this into practice by recreating a viral 3D button concept from Figm...
The Secret to Making Any Component in Framer with AI (2025 Guide)
มุมมอง 4.6Kวันที่ผ่านมา
✔︎ Framer University: frameruni.link/yt ✔︎ Create a free Framer account: framer.university/free-account In this Framer tutorial, you're going to learn what to do when you come up with an idea that cannot be created in Framer with native no-code features. We're going to explore code components and overrides that unlock new possibilities for us in Framer. I'm going to teach you how to develop the...
The ONE Secret to Creating Fluid Web Animations
มุมมอง 5K14 วันที่ผ่านมา
✔︎ Framer University: frameruni.link/yt ✔︎ Create a free Framer account: framer.university/free-account In this Framer tutorial, I'm revealing the one secret behind the smoothest fluid animations on the web. You're going to learn how to use the Gooey Effect component to create these animations yourself. If you watch the full video, you'll know everything you need to create fluid, almost liquid-...
Roasting My Subscribers’ Framer Websites (Part 3)
มุมมอง 4.8K14 วันที่ผ่านมา
Roasting My Subscribers’ Framer Websites (Part 3)
How To Build a $$$ 3D Website (Framer x Endless Tools)
มุมมอง 3.9K21 วันที่ผ่านมา
How To Build a $$$ 3D Website (Framer x Endless Tools)
Copy Any Site to Framer with 6 Clicks
มุมมอง 4.6K21 วันที่ผ่านมา
Copy Any Site to Framer with 6 Clicks
i used to build noob websites, but Framer turned me into a scroll animation god
มุมมอง 4.3K28 วันที่ผ่านมา
i used to build noob websites, but Framer turned me into a scroll animation god
the path to $1000/month with Framer
มุมมอง 8Kหลายเดือนก่อน
the path to $1000/month with Framer
you won't believe this was created without any code...
มุมมอง 3.3Kหลายเดือนก่อน
you won't believe this was created without any code...
Animated Framer Website From Scratch in 34 Minutes
มุมมอง 6Kหลายเดือนก่อน
Animated Framer Website From Scratch in 34 Minutes
Framer for Beginners: The #1 Secret to a Responsive Site
มุมมอง 6Kหลายเดือนก่อน
Framer for Beginners: The #1 Secret to a Responsive Site
6 Simple Ways to Animate Your Framer Site
มุมมอง 13Kหลายเดือนก่อน
6 Simple Ways to Animate Your Framer Site
Watch this if you want to master Framer 3D scroll animations...
มุมมอง 3.1Kหลายเดือนก่อน
Watch this if you want to master Framer 3D scroll animations...
The Perfect Website Builder Doesn't Exi...
มุมมอง 4.4Kหลายเดือนก่อน
The Perfect Website Builder Doesn't Exi...
create Apple-level scroll animations without writing code...
มุมมอง 7Kหลายเดือนก่อน
create Apple-level scroll animations without writing code...
Learn The Framer CMS in 26 Minutes
มุมมอง 9K2 หลายเดือนก่อน
Learn The Framer CMS in 26 Minutes
pov: you’re making $247/h fixing Framer sites
มุมมอง 9K2 หลายเดือนก่อน
pov: you’re making $247/h fixing Framer sites
framer tutorial: building a site from scratch
มุมมอง 26K2 หลายเดือนก่อน
framer tutorial: building a site from scratch
Tutorial: Animated Navbar in Framer (New Trend)
มุมมอง 11K2 หลายเดือนก่อน
Tutorial: Animated Navbar in Framer (New Trend)
building in framer & chill (educational material)
มุมมอง 5K2 หลายเดือนก่อน
building in framer & chill (educational material)
i didn't want to pay $25/m for a chat widget... so i built this in Framer
มุมมอง 4.5K3 หลายเดือนก่อน
i didn't want to pay $25/m for a chat widget... so i built this in Framer
6 Must-Have Framer Plugins in 2024
มุมมอง 15K3 หลายเดือนก่อน
6 Must-Have Framer Plugins in 2024
they said i can't develop this... i proved them wrong
มุมมอง 8K3 หลายเดือนก่อน
they said i can't develop this... i proved them wrong
Roasting My Subscribers’ Framer Websites (Part 2)
มุมมอง 4.5K3 หลายเดือนก่อน
Roasting My Subscribers’ Framer Websites (Part 2)
This 3D Hover Will Make Your Portfolio Stand Out (Framer Tutorial)
มุมมอง 9K3 หลายเดือนก่อน
This 3D Hover Will Make Your Portfolio Stand Out (Framer Tutorial)
Framer Masterclass: Learn Components in 30 Minutes
มุมมอง 15K4 หลายเดือนก่อน
Framer Masterclass: Learn Components in 30 Minutes
The website style you have NEVER seen…
มุมมอง 8K4 หลายเดือนก่อน
The website style you have NEVER seen…
what if websites had screen savers...
มุมมอง 2K4 หลายเดือนก่อน
what if websites had screen savers...

ความคิดเห็น

  • @race512
    @race512 35 นาทีที่ผ่านมา

    no offense bro, but you're terrible at explaining, work on that

  • @race512
    @race512 ชั่วโมงที่ผ่านมา

    You say "wrap them in a frame" but proceed to wrap them in a stack. can you expand on the difference

  • @subhajitchatterjee6903
    @subhajitchatterjee6903 12 ชั่วโมงที่ผ่านมา

    That's so cool. Do you have any tutorial for the section where they are changing the person with each click on these btns ?

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      thanks! no i haven't recreated that part. they're actually using their own AI for that. (Luma State Machine)

  • @suz3n
    @suz3n 13 ชั่วโมงที่ผ่านมา

    Babal khatra muji

  • @RR-zl3lf
    @RR-zl3lf 18 ชั่วโมงที่ผ่านมา

    I tried to set the stack of the text layer color to the gradient color, and we only need one frame in absolute position in it which is BG, and the effect remains. Please let me know if this is is wrong.

  • @almighty.saumya
    @almighty.saumya วันที่ผ่านมา

    Why are u calling it useless😂😂😂

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      isn't it useless? :'D

  • @MuhammadRehan-xc8fz
    @MuhammadRehan-xc8fz วันที่ผ่านมา

    I can’t do this 😭😭

  • @pixelthing.
    @pixelthing. วันที่ผ่านมา

    I was searching for this exact component. Thanks Nandi

    • @framer.university
      @framer.university วันที่ผ่านมา

      Glad I could help <3

    • @Anthony-le6lv
      @Anthony-le6lv วันที่ผ่านมา

      I wonder how he does it. He is a magician.

    • @pixelthing.
      @pixelthing. 23 ชั่วโมงที่ผ่านมา

      @@Anthony-le6lv ikr

  • @Shinchan0625
    @Shinchan0625 วันที่ผ่านมา

    Great tutorial❤

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      appreciate ya mate:)

  • @mrblack3163
    @mrblack3163 2 วันที่ผ่านมา

    nice sir

  • @movieswithshankar
    @movieswithshankar 2 วันที่ผ่านมา

    Best content as always ❤

  • @nobody-bt7mu
    @nobody-bt7mu 2 วันที่ผ่านมา

    Thanks as always!

  • @mikusalbo4504
    @mikusalbo4504 2 วันที่ผ่านมา

    Would having this invisible layer with some text elements mess with SEO?

  • @arunvikram347
    @arunvikram347 2 วันที่ผ่านมา

    Hi Nandi, such a wonderful video ❤️❤️ I have a doubt. How to add recapcha in framer? Can you make a video for that?

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      thank uu <3 where do u wanna add it?

  • @absolute_tk
    @absolute_tk 2 วันที่ผ่านมา

    This is soooo beneficial!

  • @robertkreft5653
    @robertkreft5653 2 วันที่ผ่านมา

    That's cool, thanks! I see it's from the Lumalabs website. Would you be able to replicate their on-scroll effects in Framer too? with the growing pictures (and going out of view).

    • @framer.university
      @framer.university 2 วันที่ผ่านมา

      Already made something similar: framer.university/resources/zoom-scroll-effect

    • @robertkreft5653
      @robertkreft5653 วันที่ผ่านมา

      Thank you so much!!

  • @DrNikhilRavi
    @DrNikhilRavi 2 วันที่ผ่านมา

    Awesome

  • @PusherMadyy
    @PusherMadyy 2 วันที่ผ่านมา

    The extension is not available anymore

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      i can see it in my Chrome Web Store: chromewebstore.google.com/detail/html-to-framer/haijifigpgpndcnbbjooffflaceedhdp?hl=en

  • @scenestealer007
    @scenestealer007 2 วันที่ผ่านมา

    You move so fast when selecting the menu items it's very hard to follow, plus you do not call out what buttons you are pressing. For a technical teacher you are difficult to follow. You also have your head blocking the layers menu so no one can see your layering. Do we really need your face inset in tutorial videos? Fortunately there are other youtube videos out there.

    • @framer.university
      @framer.university วันที่ผ่านมา

      appreciate the feedback - every comment helps me grow :)

    • @scenestealer007
      @scenestealer007 วันที่ผ่านมา

      ​@@framer.university If I came across a bit harsh, that's not intentional. I like Framer so I'm taking a lot of time learning it and comparing TH-cam tutorials. Your tutorials are very structured apart from my observations mentioned above. Thanks for your time and efforts either way.

  • @mohdom6
    @mohdom6 2 วันที่ผ่านมา

    >*:nth-last-child(n+2) Does the same with negative margin

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      we don't understand these expression around here :DD

  • @RR-zl3lf
    @RR-zl3lf 2 วันที่ผ่านมา

    so professional and genius🥰

  • @sofisof99
    @sofisof99 2 วันที่ผ่านมา

    What do I have to change to make this animation work, but not as a hero section? I mean, I have a different hero section (Section 1) and then this animated section (Section 2), as you taught in the video. The problem is that the animation starts scrolling before the whole section (Section 2) is in view. And if I change the effects to "Section in View - Top" instead of "Bottom," it works, but the animation doesn't finish. The "Video-Mask" layer gets smaller but doesn't disappear. SOS :(((

  • @kwakuBiscoff
    @kwakuBiscoff 3 วันที่ผ่านมา

    I have been on this for some time now but the AI doesn't appear and I have done all the thing you said. This can be more user friendly than this.

    • @framer.university
      @framer.university 2 วันที่ผ่านมา

      ⌘ + K and search for generate site.

  • @Bighappyboi999
    @Bighappyboi999 3 วันที่ผ่านมา

    I’ll fix it. Thank you Nandi.

  • @simplyamy5124
    @simplyamy5124 3 วันที่ผ่านมา

    Thank u so much.

  • @YagubGarakhanli-d4v
    @YagubGarakhanli-d4v 3 วันที่ผ่านมา

    Hi, can you tell me how to make categories selected not as tabs, but as a checkbox? If there is a need for the user to be able to include several categories at once.

    • @framer.university
      @framer.university 2 วันที่ผ่านมา

      Thats somezhing u cant do atm :(

  • @Juan_Teppa
    @Juan_Teppa 3 วันที่ผ่านมา

    Hi! I am super new to Framer and I am wondering which shortcut or command did you use to create text around minutes 09:30 and 09:35, thanks in advance!

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      hey! :) i think i said in the video "hit T on the keyboard". so yeah, if you wanna add text, just hit "T" on your keyboard and click on the canvas, then start typing :)

  • @clovermk1635
    @clovermk1635 3 วันที่ผ่านมา

    You won't believe me, I created this last night and I did the same steps, I'm glad I did it right! Thank youu

  • @kadirov61
    @kadirov61 4 วันที่ผ่านมา

    Amazing tutorial! You make me love Framer

  • @vigram.others
    @vigram.others 4 วันที่ผ่านมา

    How can I get my portfolio roasted?

    • @framer.university
      @framer.university 4 วันที่ผ่านมา

      i usually post on X when I record the next part, so stay tuned there!

  • @lindltailor
    @lindltailor 4 วันที่ผ่านมา

    This is literally a dream come true for me circa 2010 😂 Amazing stuff!

    • @framer.university
      @framer.university 4 วันที่ผ่านมา

      2010 you would be mind-blown! 😂 thank you!

  • @RobertoVillaLobby
    @RobertoVillaLobby 4 วันที่ผ่านมา

    Absolutely brilliant. I just finished an in depth Figma course and thanks to this tutorial as a follow up i can dive straight into Framer. Any idea when your structured course planned for 2025 is airing?

    • @framer.university
      @framer.university วันที่ผ่านมา

      awesome to hear this helped you get started! i think it'll be probably closer to 2nd half of the year but stay tuned for updates! :)

  • @igwekenneth8647
    @igwekenneth8647 4 วันที่ผ่านมา

    hi nandi, this is amazing!! one issue though, the link to the secret prompt is broken.

    • @framer.university
      @framer.university 4 วันที่ผ่านมา

      it works for me, so please try again!

  • @nobody-bt7mu
    @nobody-bt7mu 4 วันที่ผ่านมา

    Love it!

  • @rrrrranch
    @rrrrranch 4 วันที่ผ่านมา

    Thanks friend. I'll try this today or tomorrow for a new client. What about pagination? Man, since I tried Framer I just want to use that tool, there some other things I may have to build in the future and feel lazy with the thought of having to jump and learn WebFlow or Shopify for more complex cases and at the same time hoping this guys will continue improving the tool. Anyways maybe just feeling lazy lately lol

  • @Muzamalhussain155
    @Muzamalhussain155 4 วันที่ผ่านมา

    Nandi, could you please create a video player component with a fresh UI? I've been trying for 2-3 days continuously but haven't been able to get it right.

  • @Martin-bx1et
    @Martin-bx1et 4 วันที่ผ่านมา

    This format is great for finding things that you don't know you don't know. If I need something in more detail I can search for it, but at least I know what I am looking for.

    • @framer.university
      @framer.university 3 วันที่ผ่านมา

      glad it makes things clearer for you!

  • @simpleguybrand
    @simpleguybrand 4 วันที่ผ่านมา

    lol bro I see you secretly cooking up a Shopify x Framer component!

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      where did u get that from haha?

  • @sofiakarpova2347
    @sofiakarpova2347 4 วันที่ผ่านมา

    Thank you! So helpful. I created a photo gallery component with Claude before I watched this, but now I have ideas on how to improve it

    • @framer.university
      @framer.university 4 วันที่ผ่านมา

      can’t wait to see what you create! 🙌

  • @timavodah5864
    @timavodah5864 4 วันที่ผ่านมา

    Thanks Nandi. I call a stack or frame with only one item in it a wrapper. And if it has more than one item in it, a container. Like a wrapper on a chocolate bar 🍫 inside a lunch box with a sandwich 🥪 and an 🍏as well, which is the container 😊

    • @framer.university
      @framer.university 4 ชั่วโมงที่ผ่านมา

      Love that naming convention.

  • @lindltailor
    @lindltailor 4 วันที่ผ่านมา

    I wonder how does this training material compare with Framer GPT or Framer Wizard (noticed Nandi has Framer GPT in his sidebar)

  • @PaoloLunardon
    @PaoloLunardon 4 วันที่ผ่านมา

    You're always the best 🙏🏼🙏🏼, where can I submit my framer portfolio to join this serie??

    • @framer.university
      @framer.university 4 วันที่ผ่านมา

      thank you mate! please stay tuned to my Twitter

  • @gusnwanya
    @gusnwanya 4 วันที่ผ่านมา

    Please keep creating these informative deconstruct videos. Great work as always sir! Thank you