Question about moving objects based on mouse position

1

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!

2

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.

3

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.

4

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
5

I’ll definitely try it out.

Thank you for all you help and the prompt response!

1 Like