No video

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

  • @AdrianoReisDesign
    @AdrianoReisDesign6 ай бұрын

    Nandy always with the best framer tuts! 👏

  • @framer.university

    @framer.university

    6 ай бұрын

    Ahh thanks Adryano

  • @user-qe1rr2jn2r
    @user-qe1rr2jn2r5 ай бұрын

    perfect! this is exactly what I was looking for! thank you!!

  • @framer.university

    @framer.university

    5 ай бұрын

    Happy to hear i could help :)

  • @Lucashsd1
    @Lucashsd15 ай бұрын

    Amazing work bro! I learn a lot watching your content.

  • @framer.university

    @framer.university

    5 ай бұрын

    Super happy to hear it :)

  • @VitorOnoDesign
    @VitorOnoDesign5 ай бұрын

    This is awesome.

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks;)

  • @guyacey
    @guyacey6 ай бұрын

    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

    @framer.university

    6 ай бұрын

    Yeah! Similarly how magic cursor was made in the video.

  • @Baaydogann
    @Baaydogann5 ай бұрын

    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

    @framer.university

    5 ай бұрын

    I don’t think so :/

  • @adrianwolfson3088
    @adrianwolfson30882 ай бұрын

    I am not seeing any opacity or blending on custom cursor. Any idea why?

  • @sahil-shegokar
    @sahil-shegokar2 ай бұрын

    brother i love your video and i am your cool subscriber also can you please tell me your background music name or any link

  • @someonetookmynick
    @someonetookmynick4 ай бұрын

    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

    @framer.university

    4 ай бұрын

    Of course! Using the same techniques described in the video.

  • @someonetookmynick

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

  • @fullstack-jack
    @fullstack-jack3 ай бұрын

    Can you reduce the padding for your window in your videos? A bit hard to see on mobile

  • @framer.university

    @framer.university

    3 ай бұрын

    Thanks for the feedback!

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

    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

    @framer.university

    6 ай бұрын

    I’m not sure if i fully understand what you want to achieve. Maybe you have an example?

  • @FloNocode

    @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

  • @pingocho2718
    @pingocho27182 ай бұрын

    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

    @framer.university

    2 ай бұрын

    You can add a unique hover state for each of your variants. Lemme know if I can help.

  • @pingocho2718

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

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

    Hi , the cursor with the image don't work very well when you move fast. You know why ?

  • @framer.university

    @framer.university

    6 ай бұрын

    Works for me perfectly.

  • @FloNocode

    @FloNocode

    6 ай бұрын

    @@framer.university ok on your vidéo it seems not work perfectly but ok.

  • @mkbusiness3561
    @mkbusiness35615 ай бұрын

    name microphone?

  • @framer.university

    @framer.university

    5 ай бұрын

    Logi Blue Sona

  • @jazzeeblaze
    @jazzeeblaze6 ай бұрын

    First 🎉😅

  • @maskedvillainai
    @maskedvillainai4 ай бұрын

    Im confused. This is a built in feature. Whats the point of this tutorial at all.

  • @framer.university

    @framer.university

    4 ай бұрын

    I usually create tutorials where I explain how to use built in Framer features.