Parallax scroll using stop motion animation on mouse (moveonMove=function(posX, posY)

What you would do is setup an onmousemove handler in the On Scene Load for the hit element. The code would look like:

	// setup variables
	var hitAreaName = "Hit_Area_btn";
	var timelineName = "global_animation_timeline";
	
	// 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 percentage = ((event.clientX - rect.left) / rect.width);
		
		// map to a time in the timeline
		var time = (percentage * hypeDocument.durationForTimelineNamed(timelineName));
		
		// go to that time
		hypeDocument.goToTimeInTimelineNamed(time, timelineName);
	});

Note that in Hype the On Drag action does this without any code, although requires a mouse down for the drag which I know you’re trying to avoid :slight_smile:.

Here’s the file I have with it working:

MouseOver_Triggered_StopMotion_Animation-fixed.hype.zip (777.2 KB)

5 Likes