Howto: Navigate Scenes with Arrow Keys (Similar to a Powerpoint or Keynote Presentation)



To navigate between scenes by pressing the Left and Right arrow keys, add the following JavaScript to the Head of your document. You can edit the contents of the … of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

If you just want to use this function on a single scene, run this code to run ‘on scene load’:

document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '39') {
    // right arrow
else if (e.keyCode == '37') {
    // left arrow

You may also download the attached document for a real world example: (47.4 KB)

Want to navigate with ‘X’ and ‘C’? Here’s a list of all keycodes via:

Using "enter-key" for changing scenes
How to control Audio with keyboard keys?
Using arrow keys to navigate to next/previous keyframe
Home Button Go To First Scene
Building a presentation
Trigger animation using bluetooth clicker
Keyboard shortcuts to pause and play embedded videos?
🤔 How to create presentation which I can control?

I just bought Hype for bringing Keynotes presentation to the next level.

I’ve a lot of element moving on the scene one-by-one and I discovered how I can control individual animations using keypress with “scene - on key press”.

But when I’m done with my scene animations (which means there are no animations left) I would like the keypress to trigger a jump to the next scene.

Because I’m using a remote controller which emulates the mouse click, putting a button with a “next”-behaviour is not a option.

Any idea how I could achieve that ?


(Warren Adams-Ockrassa) #3

Take a look at the Scene inspector. Is this what you’re looking for…?

(Mark Hunte) #4

Thats a good call by @warrenao.

You would need to set the keypress to all your scenes.

Or you could place this in the Head

<script type="text/javascript">	
    	document.onkeypress = function (e) {
   // e = e || window.event;
   var thisName = 'Keypress Test'; // This is the name of your exported document
  var docNameCheck =  HYPE.documents[thisName] ;
  if (docNameCheck == undefined){
  thisName = 'index'  ; //- this is for testing within hype
  HYPE.documents[thisName].functions().kp(HYPE.documents[thisName]) ;

Which will then act on all scenes.

You will need to use your documents name.
i.e I exported my document out as “Keypress Test”

Keypress Test” is the document name that hype will use when you have exported it.

The 'index’ is the name of your hype document while previewing in hype

This code will allow you to Preview in hype and export without having to change things each time.

Just make sure you put your document name first for the : var thisName =


@VikingBrent @ MarkHunte

Thank you guys for those quick answers.

I realize I had to add some more details about my expectations.

I’ll try to describe it rightly…

On my timeline: I’ve some elements moving through the scene. After each mov, I use the timeline action “pause timeline”.

In the scene action, by the “on key press” action, I’ve set the action “continue timeline”.

The combination of the two allows me to trigger one action by a keypress.

At the point the scene is out of actions (read: animations), I would like the next keypress to trigger a jump to the next scene.

Both solution presented bypass the animations and result in a jump to next scene.

I hope this clarifies the situation a little bit. So, any suggestions … ?

Thanks a lot guys !

(Mark Hunte) #7

Hi @reboltof ,
I have been away so have just seen this. Can you post the hype doc


Thanks Mark for your help.

By trying and error I got yesterday to find the solution for my problem, by mixing the “head” code you proposed, and playing with the “click” actions and time line actions. Now I’m in control of my presentation :smile:

(staffan landin) #9

Hi, why not just put a timeline action after the last “pause” and select Jump to next scene?

(Mark Hunte) #10

Are you sure you posted this on the right thread??