Hello again!
Is there a way to trigger the timeline if the mouse leaves the whole scene/page?
thank you!
Hello again!
Is there a way to trigger the timeline if the mouse leaves the whole scene/page?
thank you!
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 .
Wow!!! Thank you so much — That looks brilliant. I’ll give it a try!
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’.)
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);
});
Thank you so, so much!!
OK, so now it’s working — but the timeline triggers just when the mouse stops moving. Not when I leave the page…
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).
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.
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)
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!