Framer Tutorial: Creating Custom Web Cursors (No-Code)
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create custom cursors and cursor animations for your Framer website. I'll show you how the new "cursor" property works, and how you can set up your custom cursors without any code. After watching this video, you'll have the knowledge that is needed to add any type of custom cursor to your websites.
Project remix: framer.university/resources/c...
0:00 - Introduction
0:27 - Important note
1:09 - Creating a custom cursor component
3:00 - Applying component as cursor
5:08 - Changing cursor variant on element hover
5:52 - Further customize the cursor
7:57 - Example 2: Myriad cursor
10:46 - Example 3: Magic cursor
14:42 - Example 4: Pulsing cursor
16:36 - Example 5: Show image next to the cursor
18:53 - Adding appear effects to custom cursors
22:34 - Where we came from
23:45 - Bye
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Пікірлер: 33
Nandy always with the best framer tuts! 👏
@framer.university
6 ай бұрын
Ahh thanks Adryano
perfect! this is exactly what I was looking for! thank you!!
@framer.university
5 ай бұрын
Happy to hear i could help :)
Amazing work bro! I learn a lot watching your content.
@framer.university
5 ай бұрын
Super happy to hear it :)
This is awesome.
@framer.university
5 ай бұрын
Thanks;)
Great video! 21:31 - To get an exit transition and not just an enter, a better way to do this would be to set the hide variant as the default cursor (on the desktop frame) and remove the interaction, and then set the Show cursor variant on the card hover :)
@framer.university
6 ай бұрын
Yeah! Similarly how magic cursor was made in the video.
Can we make Custom Cursor that works with CMS? For example: when you hover over the product cards, the brand name will be written.
@framer.university
5 ай бұрын
I don’t think so :/
I am not seeing any opacity or blending on custom cursor. Any idea why?
brother i love your video and i am your cool subscriber also can you please tell me your background music name or any link
Great tut! Can you specify different images (or videos) to show next to the cursor depending on which frame you're hovering over?
@framer.university
4 ай бұрын
Of course! Using the same techniques described in the video.
@someonetookmynick
4 ай бұрын
@@framer.university would you say there's a difference in performance between using this and creating a custom code component with GSAP for handling the animations? framer's animations feel clunky on my browsers sometimes!
Can you reduce the padding for your window in your videos? A bit hard to see on mobile
@framer.university
3 ай бұрын
Thanks for the feedback!
This is possible to add a video who play when you scroll on a image in a section look like you have made in you example with the image ?
@framer.university
6 ай бұрын
I’m not sure if i fully understand what you want to achieve. Maybe you have an example?
@FloNocode
6 ай бұрын
@@framer.university by example in the thumbnail in a website , when you hover in a thumbnail with new cursor effect, a vidéo on the thumbnail open and play. By example a Netflix or KZread image and when you put the cursor on image WE Can see a vidéo about image /thumbnail
How you can change a Variant into a Hover beside de first variant? y have Windows and i cant replicate that action. Thanks for de video!
@framer.university
2 ай бұрын
You can add a unique hover state for each of your variants. Lemme know if I can help.
@pingocho2718
2 ай бұрын
@@framer.university in the video, minute 7:08 you add first a variant and them you change to hover. How you do this? Excelent tutorials by the way! EDIT: Sorry for my bad english.
Hi , the cursor with the image don't work very well when you move fast. You know why ?
@framer.university
6 ай бұрын
Works for me perfectly.
@FloNocode
6 ай бұрын
@@framer.university ok on your vidéo it seems not work perfectly but ok.
name microphone?
@framer.university
5 ай бұрын
Logi Blue Sona
First 🎉😅
Im confused. This is a built in feature. Whats the point of this tutorial at all.
@framer.university
4 ай бұрын
I usually create tutorials where I explain how to use built in Framer features.