Eye Pupil Following Cursor Position

[Yaco (Yaco Roca)]

Hi!
Problem:
I’d like to greate an eye, where the pupil follows the cursor’s position.

Basically, a white circle with a smaller black circle within it. The smaller circle moves as if looking at the user’s cursor, but the eye / white circle stays in place and the iris / small circle remains contained within it.

I think This tutorial on rotational parallax might be useful but I wonder how to keep the small circle restrained.

I believe I saw a vid on this somewhere but can’t find it.

Thanks all!

---

Here is my public share link: LINK
(how to access public share link)

[Pablo_Cortes]

Hello @Yaco,

What you want to add to your pupil, the smaller black circle within the white circle, is a mouse move in viewport interaction.

Let me know how it goes.

[sara12 (sara)]

I have no idea about it

[Yaco (Yaco Roca)]

Hi @Pablo_Cortes ,

Thanks! that worked!

I was able to set it up without a problem, and the controls allowed control of the range of movement, perfect! I’m stoked, thanks for the fast response btw!

I’m tweaking it now, and I wonder if there’s a way to refine the movement this way: I’d like for the iris’s position to reach the eyeball’s edge before I reach the edge of the window, without moving beyond the actual eyeball limits. That way, the iris would still “look” at the mouse, and track its movement, yet not move beyond the eyeball.

I’ve thought of a workaround in case this doesn’t work, but this would still be great if possible in Webflow.

[Pablo_Cortes]

Hello @Yaco,

I’m glad it worked out for you. There are many ways to tweak it, depending of how you are using it and on your design. Check out this example https://www.nooneswatching.me/

[MGAVIOLI66 (Matthew Gavioli)]

@Pablo_Cortes Do you have any suggestions on how to evolve this to have the image follow the mouse cursor once hovered? Example here

[Pablo_Cortes]

Hello @MGAVIOLI66,

That is a little complicated but still doable. You will need to add a lot of classes to your elements to interact with the custom cursor. Place the images on the same container as the cursor circle, then add a custom interaction to each element on hover. That is where I would start. Let me know how it goes.

[MGAVIOLI66 (Matthew Gavioli)]

@Pablo_Cortes I managed to achieve it! Thank you.