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

,
1

I wonder if anyone can help - I have a stop motion animation set up on the timeline, which I want to be animated like a parallax scroll when the user moves the mouse from left to right - it is not the same effect as the tutorial already posed by SurveyLegend - but the timeline is controlled by the X & Y position of the mouse.

I have already tried the mouse over and mouse out actions in order to trigger the animations, but it’s not the same effect I am trying to achieve (I have also attached my Hype document with the stop motion animation I need the effect on).
MouseOver_StopMotion_Animation.zip (1.4 MB)

I previous achieved this effect using edge animate - which you can see on the homepage here:
[http://www.mbcreative.consulting/Desktop/desktop_purple.html]

The code I used was this - so I was wondering if anyone knew, what the equivalent code is (I’m not sure if either it’s Javascript or jQuery):

mouse move

this.onMove(e.pageX, e.pageY);

creatiion complete

this.onMove=function(posX, posY)
{ timelinecontrol = Number(posX)*1.25;
console.log(timelinecontrol);
sym.getSymbol(“Persuasive”).stop(timelinecontrol);
}

inside Symbol “Persuasive”

1st action - blank

2nd action -
sym.stop();

Open up code Panel:
in “Persuasive” -
Paste:

Symbol.bindTriggerAction(compId, symbolName, “Default Timeline”, 0, function(sym, e) {

});
//Edge binding end

Symbol.bindTriggerAction(compId, symbolName, “Default Timeline”, 1250, function(sym, e) {

sym.stop();

});
//Edge binding end

2

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
3

Awesome! - opens up a whole new world of potential, for using 3D model generated stop motion graphics
Many Thanks for kindly adding the code to the file as well as explaining :slight_smile:

1 Like
4

It is a very cool effect, I literally said “whoa!” when I opened your original file.

1 Like
5

You’re a gentleman and a scholar (as we say in London) for helping out - seriously appreciated!

1 Like