# Question about moving objects based on mouse position

I was wondering if anyone would be able to tell me how the wrist/arm movement based on mouse position works on this website: https://kalpa.parmigiani.com/

You can check out this animation/movement on the first scene before scrolling down to the website.

Any help would be greatly appreciated. Thank you!

Thereâ€™s an answer that takes the mouse position and converts it to a position on a timeline:

A more sophisticated solution would use two timelines: one for the X movement and one for the Y movement.

Thank you so much for sharing the link to this. Iâ€™m doing the explorations on the file youâ€™ve provided!

I had another question. As I donâ€™t have a vast coding knowledge, how would the code be set up if I wanted to opt for the sophisticated solution of having a X and Y movement?

Again, thank you for the quick response.

You would need to make a secondary timeline; only use Top position animations on one, and Left position animations on the other.

Weâ€™ll call one â€śglobal_animation_timelineXâ€ť and the other â€śglobal_animation_timelineYâ€ť.

Then the code used can just be modified to be:

``````	// setup variables
var hitAreaName = "Hit_Area_btn";
var timelineNameX = "global_animation_timelineX";
var timelineNameY = "global_animation_timelineY";

// add handler for mouse move
var element = hypeDocument.getElementById(hitAreaName);
element.onmousemove = (function (event) {
// determine how far we are in the hit area box
var rect = element.getBoundingClientRect();
var percentageX = ((event.clientX - rect.left) / rect.width);
var percentageY = ((event.clientY - rect.top) / rect.height);

// map to a time in the timeline
var timeX = (percentageX * hypeDocument.durationForTimelineNamed(timelineNameX));
var timeY = (percentageY * hypeDocument.durationForTimelineNamed(timelineNameY));

// go to that time
hypeDocument.goToTimeInTimelineNamed(timeX, timelineNameX);
hypeDocument.goToTimeInTimelineNamed(timeY, timelineNameY);
});
``````
2 Likes

Iâ€™ll definitely try it out.

Thank you for all you help and the prompt response!

1 Like