- 124
- 1 305 110
Framer University
เข้าร่วมเมื่อ 9 ธ.ค. 2022
Hey there, welcome to Framer University!
I'm Nandi, and I'm excited to show you how to create stunning websites with Framer - the most amazing no-code website builder for designers.
On this channel, you'll discover everything you need to know to master Framer, including in-depth tutorials and beginner's guides.
If you're looking to learn about interactions and cool effects on the web, UI design, or other web design skills, I've got you covered.
Happy building!
I'm Nandi, and I'm excited to show you how to create stunning websites with Framer - the most amazing no-code website builder for designers.
On this channel, you'll discover everything you need to know to master Framer, including in-depth tutorials and beginner's guides.
If you're looking to learn about interactions and cool effects on the web, UI design, or other web design skills, I've got you covered.
Happy building!
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
✔︎ 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
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...
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
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…
no offense bro, but you're terrible at explaining, work on that
You say "wrap them in a frame" but proceed to wrap them in a stack. can you expand on the difference
That's so cool. Do you have any tutorial for the section where they are changing the person with each click on these btns ?
thanks! no i haven't recreated that part. they're actually using their own AI for that. (Luma State Machine)
Babal khatra muji
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.
Why are u calling it useless😂😂😂
isn't it useless? :'D
I can’t do this 😭😭
I can do this a little more
lmk what u need help with :)
I was searching for this exact component. Thanks Nandi
Glad I could help <3
I wonder how he does it. He is a magician.
@@Anthony-le6lv ikr
Great tutorial❤
appreciate ya mate:)
nice sir
thank you 🫡
Best content as always ❤
<3
Thanks as always!
anytime!
Would having this invisible layer with some text elements mess with SEO?
Hi Nandi, such a wonderful video ❤️❤️ I have a doubt. How to add recapcha in framer? Can you make a video for that?
thank uu <3 where do u wanna add it?
This is soooo beneficial!
happy to hear it :)
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).
Already made something similar: framer.university/resources/zoom-scroll-effect
Thank you so much!!
Awesome
Thank u :))
The extension is not available anymore
i can see it in my Chrome Web Store: chromewebstore.google.com/detail/html-to-framer/haijifigpgpndcnbbjooffflaceedhdp?hl=en
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.
appreciate the feedback - every comment helps me grow :)
@@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.
>*:nth-last-child(n+2) Does the same with negative margin
we don't understand these expression around here :DD
so professional and genius🥰
appreciate it! <3
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 :(((
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.
⌘ + K and search for generate site.
I’ll fix it. Thank you Nandi.
glad I could help!
Thank u so much.
my pleasure!
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.
Thats somezhing u cant do atm :(
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!
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 :)
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
Great job! 👏
Amazing tutorial! You make me love Framer
Happy to hear that!
How can I get my portfolio roasted?
i usually post on X when I record the next part, so stay tuned there!
This is literally a dream come true for me circa 2010 😂 Amazing stuff!
2010 you would be mind-blown! 😂 thank you!
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?
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! :)
hi nandi, this is amazing!! one issue though, the link to the secret prompt is broken.
it works for me, so please try again!
Love it!
<3
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
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.
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.
glad it makes things clearer for you!
lol bro I see you secretly cooking up a Shopify x Framer component!
where did u get that from haha?
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
can’t wait to see what you create! 🙌
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 😊
Love that naming convention.
I wonder how does this training material compare with Framer GPT or Framer Wizard (noticed Nandi has Framer GPT in his sidebar)
You're always the best 🙏🏼🙏🏼, where can I submit my framer portfolio to join this serie??
thank you mate! please stay tuned to my Twitter
Please keep creating these informative deconstruct videos. Great work as always sir! Thank you
thanks for your support mate!