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