Mouse move control timeline

Using JavaScript with Hype
1

Hi there I try to control the timeline through a mouse move over an object in my scene.

I have two hype projects embedded on my page.

I use this:

//Max-leftposition of draggable
var max = parseInt(hypeDocument.getElementById('elementID').style.width);

//timeduration of targettimeline
var duration = hypeDocument.durationForTimelineNamed('myTimeline');


$( ".HYPE_scene" ).mousemove(function( event ) {
eventLeft = event.pageY;
containerLeft = hypeDocument.getElementById('elementoID').getBoundingClientRect().left;
relLeft = eventLeft - containerLeft;

destTime = (relLeft/max)*duration;
hypeDocument.goToTimeInTimelineNamed(destTime, 'myTimeline');});

Everything goes fine but only for the first scene because (I suppose) the code "eventLeft = event.pageY;" is about the entire HTML page.

There is a function that refers specifically to the scene and not the page?

Thanks in advance.

2

Hype has the...

  • event['hypeGesturePhase']
  • event['hypeGestureXPosition']
  • event['hypeGestureYPosition']

..."Drag Events". Maybe that's what you're looking for?

Here's a template that might be related...
https://photics.com/free-template-tuesday-26-tumult-hype-gesture/

3

Since you are binding the event to the .HYPE_scene, then you can probably easily get that scene through the event object -- usually just event.target.

It might be useful to post a zip of the .hype document if you can, I think that would help better see the exact effect you are going for.

Regardless, I see that this code is likely wrong:

eventLeft = event.pageY;

I'm guessing you want pageX instead here.