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.
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.
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.
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/
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.
Thank you.