How to Block Scrolling During the Website's Preloader in Framer

How to Block Scrolling During the Website's Preloader in Framer

Guide

  • Code override
  • Guide

  • Code override
  • Guide

  • Code override
  • How To Create A Custom Cursor In Framer

    In this guide, you'll learn how to set up a custom cursor on your Framer website without writing any code (because I did it for you). It's going to be pretty straightforward. We'll create a frame for the custom cursor, then apply a code override to transform it into the cursor for our website (yes, it includes hover states too).

    image of Nandi Muzsik

    Posted by

    Nandi

    custom cursor in Framer
    custom cursor in Framer
    custom cursor in Framer

    Intro To The Override

    Before we start, I want to mention that this code override will cause the frame you apply it to follow the cursor. Not only that, it'll change its opacity to 0.5 and its scale to 1.7 when hovering over an element that has either an "a" (link) tag or a "button" tag.

    Therefore, if you have an interactive element and want the cursor to enter the hover state when hovering over it, you should assign it a "button" tag.

    Where can you check the HTML tag of the element in Framer?

    Good question.

    After selecting an element, head over to the right panel and scroll down to the Accessibility section. You'll find the element's HTML tag there.

    HTML tag in Framer

    If your element has a link, an "a" tag will be automatically applied. For other cases, you'll need to manually set the tag.

    Step 01 - Create A Cursor

    When creating a custom cursor design, remember that this element will scale up and lose some opacity when you're hovering over interactive elements.

    For my demonstration, I just created a simple 20x20 circle and colored it white. Of course, you're free to create any cursor design you fancy.

    What's critical is to position it within the desktop breakpoint. Avoid nesting it further, and set its positioning to absolute. Centre it with ⌥ + H and ⌥ + V and make sure to deactivate all pins.

    Check out my setup below:

    custom cursor setup

    If you're happy with your custom cursor, we can move on to the next step.

    Step 02 - Create And Customize The Override

    So, I've put together a custom code override with ChatGPT that accomplishes several things:

    Makes the element follow the cursor.

    1. It makes the element follow the cursor.

    2. It applies a slight transition to the cursor-follow animation.

    3. It hides the default cursor.

    4. It changes both the scale and opacity of the element when hovering over something interactive (namely, elements carrying "a" or "button" HTML tags).

    You can find and copy the code override here.

    How to create and apply a code override in Framer?

    Click on the cursor element that you just crafted. In the right panel, you'll see a code override section where you can create a new file.

    creating code override in Framer

    You can paste the code override into the file you've just set up. If you want to tweak the scale and opacity changes on hover, you can adjust these lines here:

    adjust the scale and opacity in the code

    The "0.5" means that the opacity will change to 50% when hovering over interactive elements and the "1.7" means the scale will enlarge to 170% under the same circumstances. Feel free to use any other numbers that suit you. If you prefer not to change these values, simply write "1" for them.

    Step 03 - Publish The Website

    After you've done this, all that's left is to publish your website and your custom cursor will be live on the site.

    Just remember, you'll need to add this custom cursor element to each page.

    Conclusion

    That's it! You've just learned how to create a custom cursor for your Framer website in a few straightforward steps. From designing the cursor to setting up a code override and applying it, you now have full control over the cursors on your site.

    Remember, the cool part about this is its flexibility. Tailor the cursor's design to suit your needs and aesthetic preferences, making your website stand out from the crowd.

    Learning to use code overrides in Framer not only offers the potential for unique cursor designs but opens up a world of other interactive possibilities. Feel free to experiment and dive deeper.

    Framer Navigator

    Learn the fundamentals of Framer for free.

    Build your ideas with ease by learning the basics of website building with Framer.

    Nandi portrait's background
    Nandi's portrait

    Framer Navigator

    Learn the fundamentals of Framer for free.

    Build your ideas with ease by learning the basics of website building with Framer.

    Nandi portrait's background
    Nandi's portrait

    Framer Navigator

    Learn the fundamentals of Framer for free.

    Build your ideas with ease by learning the basics of website building with Framer.

    Nandi portrait's background
    Nandi's portrait

    More resources

    More resources