Jump to content


Easing depending on distance, not time

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I know easing and how to use it. It manipulates the acceleration of objects over a given timespan. 

At the moment I want to achieve something similar but in relation to how far the cursor is away from a given point.


I need it for eyes where inside a circle the pupil follows the cursor. The closer I am to the center of the eyeball, the fewer the pupil should move to the direction of the cursor. When I move the cursor away, the pupil should move to the very edge of the circle (eyeball). It would be nice if there is a way to define a curve (similar to easing) on how far at a given point the pupil goes away from the center of the eyeball.


In a simplified example that would mean:


Given is a box with a with of 1000. Inside this box, there is a dot.

The dot follows the cursor on the x-axis. The cursor and the dot are at x = 0;

Normally if I move the mouse to x = 500, the dot is also at 500.

In my case I want the dot to accelerate over the distance, meaning at x = 0 the dot is also at 0, at x = 1000 the dot is also at 1000 but when the cursor is at 200, the dot is maybe at x=20, when the cursor is at 500 the dot at x = 200, etc.


Would appreciate any input on this problem.


Thank you! 

Link to comment
Share on other sites

Tweens are based on time. What you're asking involves updating on every animation frame.



See the Pen 65cdc21ce5c49da45709ff9d09d0a754 by osublake (@osublake) on CodePen






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






  • Like 5
Link to comment
Share on other sites

@OSUblake is right on, of course. And if you simply want to remap a wider/narrower x/y range to another, here's an example of using a tween's progress accordingly: 



That's not really what I'd use for an eye-following thing because it's not actually measuring things with true angles from the center of a circle (so it goes off the edges at the diagonals), but I was trying to keep things as simple as possible to demonstrate the concept. 


You basically create a tween for the x-axis and another for the y-axis and that goes from left to right (or top to bottom) and then simply remap the ratios, like if you're basing it on the mouse position across the whole screen width/height (or whatever). Of course you could tween the progress of another tween too if you want things to animate/ease to the new position. If you need help with that, let me know. 


Happy tweening!


  • Like 7
Link to comment
Share on other sites

Thanks a lot for your answers!


I am not sure whether my code is well coded or not, but I solved the eye following the cursor by drawing/calculating a line from the center of the eye to the position of the cursor. At the intersection of this line with the circle of the eyeball, I get the point of how far the pupil is allowed to move.


Now I wanted to include @GreenSock's approach but failed hard.
Can't work it out how to combine this solution with my attempt. I am also open to different approaches, mine is probably way too complicated.

See the Pen bQdmom?editors=1010 by clmsvie (@clmsvie) on CodePen

Thanks so much for your time and effort! :)

Link to comment
Share on other sites

Ya there is a lot of code that I am not even sure what is the purpose of that.


You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate.  You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event.


Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.


See the Pen KrpYay?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 9
Link to comment
Share on other sites

I wasn't thinking about an eye when I posted my response. Resizing the movement vector if it exceeds a certain radius is one way you could correctly handle diagonal cases.


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







  • Like 7
Link to comment
Share on other sites

Thank you both for your solutions, I really appreciate it a lot! Thanks so much.

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.