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.
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
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
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...
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! 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
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!
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?
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)
@@MegaSHAKII Check out this video for a shape like that. You can probably find way more videos simular to this one though. ua-cam.com/video/F5spc5rRKD0/v-deo.html
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?
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
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?
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
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 ?
More Webflow videos on the way! Don't forget to give the video a like if you enjoyed it :D
Thank You!!!! :)
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.
Thanks! Helped a bunch
Value Packed Video!
Thanks alot for taking the time to put this together !
Wow! Thank you so much. I thought this effect would be difficult but you made it so easy to follow!
Thank you Caler, this was exceptionally simple and easy to understand :)
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
Thanks so much, worked!
But had to delete the embed, because with the embed didnt work.
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 have the same issues any idea how to fix?
You have no idea how perfect the timing of me finding this is haha
Thank you for the information! Great video! Keep up the good work!
Thank you! it's super helpful!
Man that's really outstading information
Very Helpful. thanks
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.
Fantastic tutorial thank you!
This was a great tutorial thanks so much!
Awesome tutorial! Really easy to follow along 👍🔥
Happy to hear that!
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...
thank you so much Caler
Is there a way to create a different cursor and apply to all links? So we are not having to set the interaction to every link in the site?
very helpful thank you !
Thanks for all ! I wondered how to put this cursor on every pages ? Please.
This is gold bro TY
thx it helped me a lot!
Is there a way to hide/disable the function on mobile? Removing the animation just leaves the dot in the middle of screen.
Man! Asante sana!
Thank you so much ❤❤
Super duper helpful!!, 🎉🎉
I did everything just as you said, but I am not able to scroll the page once I publish it. The code you showed was also added btw. Please help me out.
Hey, the custom cursor works but only on Safari...can u tell me why? thank u
Hlw sir I am From India and like your efforts
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
Bro, I'm struggling for two days with fixing this issue. Did you fix it?
There is a bug on Safari- the cursor looks as a box and not circle.
Do you have a solution for it? 🙌🏼🙌🏼🙌🏼🙌🏼
Is there a way to achieve the click function without the custom code?
I am curious to know if it is possible to do a mask effect to change the colour of text within the cursor?
Thanks, it worked. How is the best way to apply to all pages in a project?
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
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!
How did you solve this please
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?
It's best to do the cursor animation ass the last step, or hide it so you can work on other elements
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)
bro - that's awesome - how can you add a trail to that cursor?
Thanks so much
Amazing! thanks
Glad you like it!
Where'd you get the liquid shape? 😮
Made it with Cinema 4D
@@CalerEdwards could you do a tutorial on that it looks so coooooool
@@MegaSHAKII Check out this video for a shape like that. You can probably find way more videos simular to this one though. ua-cam.com/video/F5spc5rRKD0/v-deo.html
@@xMEREEELx THANK YOU SO MUCH!
When you use this it also shows on the sideways screen on the ipads how do you make so that it doesnt show on these screens
Nice tutorial! I'm having a trouble, when I try to select another element in my editor, it only selects the cursor-wrapper
Same, wondering if its a recent update?
Select elements in your Navigator
i want this to show in a certain section how would i do that
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?
Yep, set the Nav bar z-index to something like 1000 and then the cursor z-index to 2000 - or anything higher than the nav really
Muchas gracias amigo
Is the background animation a lottie file ?
THANKS
Can we add image rather then creating a subject? BTW thank you for such clear and straight forward video
Ofcourse! Just change the background of the cursor div to an image instead of a color.
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
I also have this. Did you find a solution ?
Did you find a solution?
clicking down the page ot working at all, hovering as well
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?
Hey, what if my page size is longer than your example? what should I do?
If you’re using VW/VH values they should flex to whatever size your viewport is.
@@wyattcoe8825 No idea, what ur talking about 😃 anyway I dont use it anymore, cheers
Is that webgl? How that can be used in webflow?
Really simple to achieve - thankyou. But like others have said it doesn't work when mouse over embed links like youtube videos
i dont have embed element?
Are there any other ways to apply the effect of the embed code at 5:00, without writing any code?
select the cursor wrapper > effects> events> set to none
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
Thanks for getting back so quickly.
Shoot. I’m a “No code” Webflow rookie! So not sure how to write up that code. I think it’s an “embed”??
I’ll try messing with that code to see if I can figure out how to add it in. 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 ?
A trick to use is put the wrapper in a global symbol. Drag the symbol on the pages and make sure the interactions are set properly to classes.
@@rickbossenbroek Nice one! Thanks :)
@@williameerhard9467 sure no problem ✌🏻
shame you need the paid plan to embed html
keep seeing the cursor
ua-cam.com/video/TTeWISVnkh8/v-deo.html
how you will arrived to select yout heading if you have configure cursor fixer with z-index = 100 ????
Amazing thanks so much!
Thank you so much
Thanks a lot! Really helpful