Webflow Help: Custom Circle Text Cursor Issue Explained | Relume Community

Webflow Help: Custom Circle Text Cursor Issue Explained

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

💯1

29 comments

Matt J.
·
William B. yeah all good. Have you tried applying this to any other section besides that one to rule it out? I suspect the same thing.
William B.
·
Hmm, let me try
William B.
·
Getting the same result in a non-sticky element too
Matt J.
·
alright, will add to my list to dig into it soon - in the middle of building myself. 😉
❤️1
Matt J.
·
If anyone in the community has the time sooner to dig in and provide any advice, let's go!
🙏1
Matt J.
·
William B. did you happen to remove the cursor interaction?
William B.
·
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!
Matt J.
·
William B. draft page works - which one?
William B.
·
Matt J. Element Testing https://preview.webflow.com/preview/boggs-creative-v8?utm_medium=preview_link&utm_sour[…]&pageId=663020356adab9f1e4df1781&locale=en&workflow=preview
William B.
·
Ah bu tI guess the page needs to be large enough to be scrollable to see what's going on
William B.
·
There, added a div with 600vh
👀1
Matt J.
·
hmm I think this page is missing the interactions, yeah?
William B.
·
Very likely, let me see
William B.
·
It was; should be good now
William B.
·
(I only have the cursor replaced on one of the 3 cards so far)
Matt J.
·
right right
Matt J.
·
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?
William B.
·
Yes, mainly
William B.
·
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
Matt J.
·
Hmm pretty sure instead of using scroll into view, we should use mouse over element
Matt J.
·
or viewport
Matt J.
·
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
Matt J.
·
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.
William B.
·
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.
Matt J.
·
William B. 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.
William B.
·
Yeah, I think I'll probably scrap it for now and maybe revisit in the future
William B.
·
Thanks for checking it out though!
Matt J.
·
I would check out some of T.Ricks old videos, he had a lot of these types of interactions on his channel
Matt J.
·
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