Edge Animate parallax composition ready equivalent in Hype

1

Hi, Just switching to Hype from Edge Animate and am trying to get a parallax function to work here by recreating a page I made in Edge Animate.

In EA I set up this function in compositionReady

this.onMove=function(posX, posY){
timelinecontrol = Number(posX)*1.7;
console.log(timelinecontrol);
sym.stop(timelinecontrol);
}
and then another in mousemove

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

I’ve checked out the other forum posts here on parallax but did not find a solution. I’m confused about whether I need to set up an animation for my elements and then manipulate the timeline with the mousemove or if I can just have the js move them relatively. Also I have the elements I want to move grouped and am trying to target the groups. Is this correct. Cheers

2

depends on what the result should look like …

3

I’m trying to move multiple background elements together 5 pixels from center left and right and then a group of foreground elements 10 pixels from center left and right depending on the mouse movement.

I saw your post here Control mouse of main timeline with the mousemove test and have tried to recreate it from a fresh document using jquery-3.1.1 and cannot get it to function. In your file, I swapped out your jquery in the example and put in jquery-3.1.1 and yours still works properly. Mine does not move. I could not find a mousemoveToTimelineDestTime() in the Hype function list so I copied your code and pasted it into an untitled function and renamed it the same as yours. Still no love. I’ve gone through each element and each inspector panel and cannot see any difference between your file and mine and yet mine will not move. I’m obviously missing something but don’t know what. Any clue? Here is my file.

Testing.zip (93.5 KB)

4

Hello @Lancedboyle,

well, to be honest, you will not need JQuery …

Place it on sceneload:

	//your destinated timelinename
	var destTimelineName =  'test',
	
	//get duration
	timelineDuration = hypeDocument.durationForTimelineNamed(destTimelineName),
	
	//get active sceneelement, -> http://forums.tumult.com/t/extend-tumult-hype-with-javascript-hypedocument-extensions/6847/18
	activeScene = document.querySelector('#'+ hypeDocument.documentId() +' > .HYPE_scene[style*="block"]');
	
	//check if listener is already set
	if(!activeScene.hasAttribute(destTimelineName))
	{
	
	//set listener
	activeScene.addEventListener('mousemove', 	
	function (e){
	//get desttime
	var max = hypeDocument.getElementProperty(activeScene, 'width');
	var eventLeft = e.pageX;
	var sceneLeft = activeScene.getBoundingClientRect().left;
	var relLeft = eventLeft - sceneLeft;
	var destTime = (relLeft/max)*timelineDuration;
	//set desttime
	hypeDocument.goToTimeInTimelineNamed(destTime, destTimelineName);
	}, 
	false);
	
	//set attibute for listenercheck
	activeScene.setAttribute(destTimelineName, 'true');
	}
3 Likes