Delayed motion on mouse movement with quickSetters

[pilicorp]

Hi there!

 

I've spent a few days trying to find out how to delay a motion based on mouse movement.
In my example (which is a POC with dirty hacks, please don't mind them), there is my failed attempt to do it, but I only succeed in resetting the object back to its position. What I'm trying to achieve is the "added" motion, including the easing effect.

If anyone is able to pinpoint what I'm missing (probably something obvious), I would be very grateful.

See the Pen ExyNJdG by anaelbe (@anaelbe) on CodePen

[ZachSaucier]

Hey pilicorp and welcome to the GreenSock forums. Can you please try to be a little more clear about your goal? Do you have an example of the effect that you're trying to create?

[pilicorp]

Hello ZachSaucier, and thank you!

Here is more or less what I have in mind, the hover effect on picture + caption, minus the css transition hack they use : https://designobjekt.se/

 

[ZachSaucier]

To create that sort of effect you should 

1. Set a variable (or variables) to determine the max distance the object (to be moved) can go.
2. Set a variable (or variables) to determine the max distance away from the center of the measurement object the mouse should be tracked.
3. Measure the distance from the current mouse position to the center of the measurement object.
4. Get the percent of the distance measured in 3. compared to the variable(s) set in 2.
5. Multiply the distance from 1. by the percent obtained in 4. and apply that to the object(s) to be moved.

Make sense?

[pilicorp]

It does, i'll try to implement it to see if I'm getting near.

 

Updated codepen, seems pretty neat!

Thank you very much for your advice 🙇‍♂️