Community forum for knowledge and support

Updated 8 months ago

Custom Circletext Cursor Positioning Issue

At a glance

Are we free to ask for Webflow help that that isn't related directly related to Relume in here? Here's my question, but if not allowed, I'll delete it:
I'm trying to make a custom circletext cursor that only shows when hovering over certain elements. I got the only show over certain elements part down, but it's only snapping to the cursor when the middle of the element is also in at least the middle of the page – I think because of the Sticky positioning of the layout354 parent element I'm using it on, but not totally sure if that's it.
Here's the read-only link: https://preview.webflow.com/preview/boggs-creative-v8?utm_medium=preview_link&utm_sour[…]8&preview=624fb3338c02995ffd9b5b755b7db480&workflow=preview

M
W
29 comments

yeah all good. Have you tried applying this to any other section besides that one to rule it out? I suspect the same thing.

Getting the same result in a non-sticky element too

alright, will add to my list to dig into it soon - in the middle of building myself. 😉

If anyone in the community has the time sooner to dig in and provide any advice, let's go!

did you happen to remove the cursor interaction?

I did because I finished the rest of the site and wanted to push it live, but I still have it in a draft page. Or I’d be happy to add it back to the regular page if you’re troubleshooting!

draft page works - which one?

Ah bu tI guess the page needs to be large enough to be scrollable to see what's going on

There, added a div with 600vh

hmm I think this page is missing the interactions, yeah?

Very likely, let me see

It was; should be good now

(I only have the cursor replaced on one of the 3 cards so far)

and the circle animation isn't something we are concerned with right now, we're just trying to get the replace cursor to trigger at the right time, yeah?

I did have some trouble with the circle text massively shrinking at one point; I don't recall how I fixed it, but that's a separate problem for now

Hmm pretty sure instead of using scroll into view, we should use mouse over element

yeah I mean I can't get it to look right but with some edits I'm sure that it can be done. I think that mouse move over element makes the most sense because this cursor is restricted to these cards only - you are not even wanting them to be outside of these cards

not entirely sure that you'll get it 100% without using some external JS that gives you a bit more control over the independent trigger point and constraints - right now they are one in the same via the webflow interactions.

I thought the same, but when I do Mouse Over Element, it seems to count the element as what determines the text location. So when the cursor is over the far right of the element, the text is at the far right of the page, now outside of the element.

yeah, I put it on the card-deck_component class - again it didnt seem perfect, but I think it was just some settings that needed to be messed with really.

Ultimately though man, as fun a challenge as this is, replacing/chasing the cursor with this is not great UX. I probably wouldn't kill yourself over it.

Yeah, I think I'll probably scrap it for now and maybe revisit in the future

Thanks for checking it out though!

I would check out some of T.Ricks old videos, he had a lot of these types of interactions on his channel

its fun to just do some of his tricks for no reason, just to learn the tools and derive something from it with a different application

Add a reply
Sign up and join the conversation on Slack