Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Stagnax

Cursor follows the eyes

Recommended Posts

Hi,

Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor

 

See the Pen aqxoPg by stagnax (@stagnax) on CodePen

Link to comment
Share on other sites

Hi @Stagnax :)

 

There isn't any 'built-in' function to easily do that. It's a matter of calculating mouse position and setting the eye position and/or rotation. It will also depend on whether you're using SVGs, divs or maybe canvas. There are a whole bunch of different styles and approaches on CodePen that should provide some inspiration for you.

 

See the Pen ?limit=all&page=1&q=eye+follow by search (@search) on CodePen

 

Happy tweening.

:)

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Thank you I'll look into it :)

Link to comment
Share on other sites

Hi @Stagnax

 

Give me a few, and I'll make an SVG version as mouse coordinates can get kind of screwy.

Link to comment
Share on other sites

Here you go. 

 

See the Pen jzNgqY by osublake (@osublake) on CodePen

 

 

I show some of the trig used for this here.

 

 

And how to get mouse coordinates inside an SVG here.

 

 

  • Like 4
Link to comment
Share on other sites

Hi @OSUblake,

Thank you for the examples and thread.

One thing that I'd like to know is , and I am basically referring to JavaScript is , how do i not get tangled in creating a certain animation or achieving a certain effect or  complex logical method with the overwhelming amount of resources found online as I learn everything form the web.

 

(I've read the links you've just sent me and I noticed creating small games can really help in building logic , so I am starting to do that)

:)

 

  • Like 2
Link to comment
Share on other sites

That's a problem every developer faces. How to avoid spaghetti code, and there is no easy answer.

 

I think learning how to structure stuff like a game is really helpful. I would also look at how frameworks like React and Vue structure stuff into components. Creating logical grouping of the stuff you are working with can go a long away. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×