Custom cursor not aligned (at 1921px and greater)
Hey everyone, I made this for a client a few months ago and I had a custom cursor that would follow the position of the mouse, but also rotate and return to face true north (just like a how a compass needle would when you shake it). This was working perfectly fine for months but I've come back to fix up parts of the site, and now the custom cursor is not being aligned to the mouse position and I can't for the life of be figure out why. All I've figured out is that it happens to be misaligned on breakpoints larger than 1920px (which is a breakpoint I have set), however none of the properties relating to the custom cursor are altered at this breakpoint, nor is there anything specified in the JS to change it when it's at a the larger breakpoint. Another thing is that this issue occurs when the page is loaded at the breakpoint, meaning if I adjust the viewport, the alignment doesn't change. So I'm not sure if this is something to do with media queries either. Would anyone know what could be causing this issue?
Here is the website: https://projectzero.earth
Here is the javascript for the cursor: https://9p8k3z.csb.app/global_customCursor.js
6 Replies
Super interesting because I'm repeating the issue you're talking about above 1920px but only up to like 1958ish then it starts working normally again
Do you have a readonly link? Site looks pretty great regardless!
Yeah interesting, I just checked it myself and mine is being fixed at 1961px and up. I honestly have no idea what could be causing this...
Anyway, here's the read-only link: https://preview.webflow.com/preview/staging-projectzero?utm_medium=preview_link&utm_source=designer&utm_content=staging-projectzero&preview=c68398a5662e363448c08a514b0b789e&workflow=preview
You'll need to
display:none the .section_preloader and overflow: visible to .page-wrapper in the designer in order to see the hero section and scroll (and see the cursor)alright it looks like the compass_container is getting a transform applied to it that it shouldn't, at your 1920 breakpoint, can you try setting this property again at the 1920 breakpoint?
Hmm, so I've set that at the 1920 breakpoint and didn't recognise any changes. But I did notice that when the custom cursor is aligning on smaller breakpoints, the translate: -50 -50 is coming up. But when it's not aligning, that property is not coming up. So I'm guessing perhaps it's in the way the transforms are being dynamically added by JS. Let me take another look at the JS and perhaps write the -50 -50 directly into there rather than in Webflow. Will report back if it works
Oh my god, okay I think I've got it for now. I took off the translate(-50%, -50%) out of Webflow and added it just through the JS as a static value in the string that updates the transforms. I still don't know what was causing the issue between the breakpoints but at least it's solved for now. Thanks so much @AtomicZBRA
Glad you got it working @Chinmay !!