Element move with mouse cursor in the background over "foreground" elements

Design help Animations & Interactions
1

Hello everyone,

What happens now is that the blue gradient in the background follows the cursor. Good!

But what is not working as I envisioned in my mind is that the gradient stops following the cursor when hovering over one of the cards or images seen on the page. I want it to follow the cursor all the time. Not only when hovering over its direct container.

I know this is working completely as it is supposed to according to the coding, but who knows what CSS I should look into, what HTML structure could work with this, or perhaps what JS could be helpful? To make it work as I envision.

Here I quickly explain it in a Loom:

Thank you in advance,
Scott

Here is my public share link: [LINK](https://preview.webflow.com/preview/fontyspulsed?utm_medium=preview_link&utm_source=designer&utm_content=fontyspulsed&preview=dfab549c0cbadbc1e4d4e850c6afe359&workflow=preview)
(how to access public share link)

2

hi @scottruigrok you are showing WF preview and that is not reliable source to see what exactly is rendered on site and behaviour can be odd. So I was checking your live site and there is NO cursor background in Safari, Chrome, Firefox. You should fix first this and after move to another things. :wink:

PS: ALWAYS check live (published) page

1 Like
3

@Stan. Fair point and good feedback.

Now that it is published it is showing similar behaviour as in the preview. Do you think you have suggestions for my initial question?

4

Hi @scottruigrok as I can’t see your mouse move in viewport interaction I will suggest you can first read this
https://webflow.com/blog/custom-cursors-guide
and when you will have some problems with implementation you can search solutions on this forum as this topic is covered many times. :wink:

5

I wonder how you can not see it. It is visible through the preview link, the site link or the video.

I also have looked at that blog article when it came out, it is good, but as I described in my post, it is not the same. My interaction is not a custom cursor that is in the ‘foreground’ aka on top of all other elements. My interaction should be in the background, behind all other elements, but still follow the cursor when hovering over elements that are ‘laying on top of it’.

6

Hi @scottruigrok , @Stan might have missed it because it is not where it is supposed to be and people can sometimes miss things. But he did mentioned he didn’t see Mouse move in viewport so that is what you should apply, which is under Page trigger.

You’ve set animation on Mouse move over element trigger to the parent of that gradient-circle, that is why it is not working properly.

So, instead of that apply Page trigger > Mouse move in viewport and use same animation.

Screen Shot 2022-02-03 at 6.33.35 PM
Screen Shot 2022-02-03 at 6.33.35 PM1920×1192 194 KB

2 Likes
7

For some reason I figured something like that must have been the case. How obvious in the end…

Thank you both for taking the time @abirana & @Stan !

8

Hi @abirana thanks you have understand my response about mouse move in viewport. I have see all interactions but dind’t see the one that should be used and that’s why I have tried to point right direction. But …

9

@stan it’s cool, we are all trying to help each other here. You had a different perspective but you were right.

This is a public forum, I think nobody is liable to be 100% correct.

10

I have to thing about what was my perspective… I just saw problem, pointed where it is and provide solution, but my bad was to relay on user’s own initiative to read article and dig into problem. :crazy_face:

11

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.