For anyone watching this in 2024, you don't need to use the custom "Embedded Code" anymore. Webflow introduced a simpler way which will allow your buttons and links to be clickable. Select your Div cursor wrapper and on the right panel scroll down to the Effects options and down to 'Events', it shows two options, "Auto" and "None". Select 'None' and this will allow all your links to be clickable. I learned this on the Webflow University and on the "Pointer Events" section.
Y-axis tracking didn't work. The vh only takes a section of the entire screen, when I scroll the page, the cursor doesn't track the pointer anymore. Kindly help me out here
I followed along to the letter but the curser div only moves up and down and flickers to the left and right when the curser is moved in it's X position when previewed.. bizzar
Just because I want to get this straight, if my nav bar had a dropdown on hover, this won't work with the mouse animation div added? Because even if I had that embed that you said to add the hover action doesn't work. I am either wrong or ignorant.
How can you make the custom cursor disappear when the mouse leaves the viewport, say to click on a new tab, then reappear when the mouse re-enters the viewport... I'm sure it can done quite simply but it's giving me a headache! TIA for any assistance anyone...
@@MegaSHAKII Check out this video for a shape like that. You can probably find way more videos simular to this one though. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-F5spc5rRKD0.html
Awesome! I usually group everything for the cursor as a symbol and quickly add it to each page. Then just make sure you have the page trigger for each page and your good to go :D
for some reason my cursor is glitching its position even tho I see that the right position percentages are being recorded in the mouse animation. anybody know a fix
Awesome tutorial and it worked! Thank you! But theres one problem here in my project, after i setup this cursor wrapper, i failed to edit all the elements underneath the layer(if this is making any sense), is there any solution to this?
Thank you! Great explanation. I made the custom cursor, but all the links do not work..There is some content in the page in position-absolut, but I made the cursor the max abs.value. Where is the problem?
It works great on all browsers except chrome. In chrome after couple of scrolls, the mouse cursor appears :/ Does someone has the same issue? Is there any solution to this?
Hey, awesome video, but I can't click on anything after using the custom cursor. Any idea? Also, it won't let me highlight text boxes so I can edit for hover effect. All help appreciated!
Thank you! Could you explain why would this animation play out smoothly on preview but starters and clunky on publication? Maybe you've stepped into this issue yourself?
Great simple tutorial! I would love to keep my sticky nav in my design... but the custom cursor always seems to go behind it? any way the cursor is constantly seen?
Hi, I was wondering the same thing. When I get it to go over the nav bar (after messing with the z-index) the animation no longer works. I was wondering if you ever figured out a solution?
Any chance that someone reading this knows how to change the filter for cursor animations? I'm trying to invert the color on hover (this works) and undo invert on hover out (this isnt working)
Nice video as always, Caler. Hey, do you have a work around for the custom cursor on “Tablet Landscape”? I know you can turn off that effect for mobile landscape and mobile portrait (since there is no “hover”), but WF treats Tablet Landscape as if it’s the desktop, and I don’t know how to turn off the custom cursor specifically only for Tablet Landscape but keep it on for desktop. Any help would be awesome. Your tutorials are some of best out there. Nice work.
Thanks! Mmmh, have you tried something like this: body:hover .cursor {opacity:1.0;} and set the cursor default opacity to 0. This would hide the cursor unless the mouse is hovering on the body. Let me know if this works :D
I have a problem :) after setting my cursor in all body and all links to none there is still a default web cursor when i publish. does anyone have a solution to this? Thanks
Would it be possible to apply this method to all pages? (The entire website) Or must it be within a wrapper? Come to think, I could just copy and paste said wrapper into every section ?
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TTeWISVnkh8.html how you will arrived to select yout heading if you have configure cursor fixer with z-index = 100 ????