How to trigger the timeline when the mouse eaves the whole page


(Jonothan) #1

Hello again!

Is there a way to trigger the timeline if the mouse leaves the whole scene/page?

thank you!


#2

You could create a sort of ‘dead man’s switch’ that just listens for the ‘mouse over’ event:

dead-mans-switch.zip (20.3 KB)

Alternatively, you could create a JavaScript function that loads ‘on scene load’ which detects a mouseout from the Element ID of the Hype document:

   hypeDocument.documentId().mouseout(function() {
        hypeDocument.startTimelineNamed('timelineName', hypeDocument.kDirectionForward)
        }

Keep in mind if you have scaling on, your document will take over the entirety of the pixels of your browser :sailboat:.


(Jonothan) #3

Wow!!! Thank you so much — That looks brilliant. I’ll give it a try!


(Jonothan) #4

How do you find the elementID?

I’ve put it in and set the timeline name, but nothing is happening.

(I have checked the timeline works with a button!)

Thank you!

Here is the file: https://we.tl/zz6QCaoYjk (The scene I am talking about it the largest layout of ‘Work’.)


#5

I’m not really clear how your document is triggering events, but here’s a pared down example that just uses the boundaries of the Hype document (on scene 2):
time.hype.zip (10.5 KB)

var divID = hypeDocument.documentId()
document.getElementById(divID).addEventListener("mouseout", function( event ) {
  // listen for the 'mouse out' event for the document
  hypeDocument.startTimelineNamed('Time', hypeDocument.kDirectionForward);   
});

(Jonothan) #6

Thank you so, so much!!


(Jonothan) #7

OK, so now it’s working — but the timeline triggers just when the mouse stops moving. Not when I leave the page…


#8

What is your goal here? Do you want to reset the set of thumbnails after a period of inactivity? Something I posted in my first reply might be more suitable. The mouseout event is a bit finicky (and of course it won’t work at all on mobile).


(Jonothan) #9

The goal is basically that, when the mouse goes to the URL bar/out the page, a timeline goes to 00:0:03 (which happens to make elements on the page fall to the bottom of the page (this is done and works)).

Next, when the mouse enters in again, (goto 00:00:00 in timeline), the elements return to their keyframed position at 00:00:00.


(Mark Hunte) #10

Hah,

Just quickly put this together… surprised! it seems to work…
Probably could just use mouse over but just experimenting…
It is setup for the whole window, not just the hype document

On load.

    	hypeDocument.customData = {}
	
	document.addEventListener("mousemove", raise);
 	document.addEventListener("mouseout", outBounds);
	 
		var myVar;
	function raise(e){// Each time mouse moves in doc
	clearTimeout(myVar);//clear last timer 
	 myVar = setTimeout(drop, 100); //reset new timer 
		hypeDocument.continueTimelineNamed('drop', hypeDocument.kDirectionReverse, false)//keep up
		 hypeDocument.customData.outside = false;//-- we are not outside
	 
	}
	
	//
 
function drop() {
 
if ( hypeDocument.customData.outside === true ){//-- only drop if we are out of bounds

hypeDocument.startTimelineNamed('drop', hypeDocument.kDirectionForward)//drop

}
}


function outBounds(e){
hypeDocument.customData.outside = true //-- we are  outside
 
}

dropMe.hype.zip (12.8 KB)


(Jonothan) #11

So amazing! Thank you — And it’s all working!!!

Thank you so very much! Perfect!

I’ll stick the url here when it’s all up and working!