Linking to a specific scene from inside and outside of a Tumult Hype document

Tumult Hype documents are accessible from a single URL. If you name your document 'Flying' and upload it to your site, then your animation and all its scenes are accessible from (unless you change the name of your exported .html file).

This article describes three ways to navigate between scenes:

  • Load a scene directly from a URL (For example:
  • Use a button outside of your Tumult Hype document to load a scene in that document (on the same page)
  • Linking to a scene by linking the text itself (not using Hype's built in 'Go to URL' actions)

Linking to a Scene using an URL

A single URL for your Tumult Hype document is suitable for many animations, but you may want to be able to link to a scene directly, or you want to ensure that scene visits are entered into browser history. One way is to split your document into multiple pieces, and link directly to the generated .html files.

There's another way that uses JavaScript:

  1. Open the 'Scene Inspector'.

  2. In the 'On Scene Load' area, click on the Action menu and select Run Javascript….

  3. Click on the Function menu which appears and select New Function….

  4. Paste the following in the Javascript area:

     var checkHash = function() { 
     var hash = window.location.hash.substring(1); 
     for(var i = 0; i < hypeDocument.sceneNames().length; i++) {
     if(hypeDocument.sceneNames()[i] == hash) {
     if (window.loadedHashLocation != true) { 
     window.loadedHashLocation = true; 
     window.onhashchange = checkHash; 
     window.location.hash = "#" + hypeDocument.currentSceneName();
  5. Add this script to load 'On Scene Load' for all scenes. You can see this script in action by viewing the document attached to this article. This script looks at whether there is a #scenename anchor tag present in the current browser windows URL. To link to a scene, use the name of the scene in the URL.

Download this example: (23.7 KB)

Linking to a Scene From outside of your Tumult Hype Project

If you have a link on a page that contains a Hype document, and you wanted to change that document's scene, you would need to run an 'onclick' handler on an href using the following code:

<a href = "#" onclick = "HYPE.documents['MyDocumentName'].showSceneNamed('MyScene')">Jump To My Scene</a>

You can find the appropriate 'MyDocumentName' by looking at the first line in the *_hype_generated_script.js in the exported Resources folder. If you saved a document named 'index' then your MyDocumentName value would be simply index. It's best to use scene names that do not contain foreign characters or symbols. Keep em simple.

Linking to a Scene from within your Tumult Hype Project

This technique would be for the following case:
Let's say you have a box on your first scene with a single word in the inner HTML of an element, and you want this to link to scene 2. First, add the following JavaScript in the HEAD area:

function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

This code gets the document name of your document. For your link, you would need to add the following code to the Inner HTML of an element (if your scene being jumped to was named scene2):

Jump to <a href="#" onclick="window.myhypedocument.showSceneNamed('scene2');">scene 2</a>

Keep in mind that you would need to create a different myhypedocument variable for each document you use this in (if they are loaded on the same page). Also note that you cannot run this code within an HTML widget or iframe.

Here’s another way, which is suitable if you only have one Hype document (named Index, in the example) on the page:

<a href="#" onclick="HYPE.documents['index'].showSceneNamed('scenenamed1',HYPE.documents['index'].kSceneTransitionInstant);">

Download this example: (10.7 KB)

For more on the JavaScript APIs available in Tumult Hype, please see the JavaScript Documentation.

Direct linking to scenes
Browsers Back Button
Anchor pointing to a scene using Iframe
Refresh/reload page
Text element: different words linking to different scenes
Navigate to specific scene in hype from outside of hype / URL string?
Javascript jump to scene
Starting a Timeline from text link
Language specific starting scene?
100+ scenes in doc, splitting and linking possible?
Jump to scene > object without JS
Jump to a scene in another document
Link to scene from inside HTML widget
(Resolved) How to call scenes via content inside an HTML widget?
How can I navigate to an anchor in a parent document (iFrame)?
Looking for help with a simple question
How to make scene URLs work even when exported as OAM file
How to make scene URLs work even when exported as OAM file
Any way we can load a particular scene instead of loading the first scene?
Jump to a time in another scene
Linking to Scenes from "external" JS/jQuery menu
Interactive magazine fails (only a little)
Create a 'Back' button to transition to the last-visited scene
Image button - SEO - alt attribute
hypeDocument is not defined or HYPE is not defined
Dynamic variable to function
A data visualization project use Hype4
Multilanguage possible on textboxes or buttons?
Interpreting Scenes as Bookmarks in HTML5 it possible?
Trigger timeline action in Hype from Captivate
Hyperlink to specific Hype scene from another website?
Making a solid circle blink & Password controlled form
Link a Hype document from another Hype document (embedded as an iframe)
Open a scene from within a html widget HELP
Trouble using Material Design Components Inside Hype
Change scene within an IFRAME
How do I assign a url to each of the scenes within my page?
Auto Scene Title callBack Function / Use a callBack for all hype scenes onLoad events
Add Bookmark to a page
Giving anchor links/hyperlinks to timelines
Hyperlink to specific Hype scene from another website?
Hyperlink to specific Hype scene from another website?
How to send my visitor to a specific page if I have just one html?
Linking a specific point of a scene from a different scene
Control Hype .HTML from Smartphone .HTML
Open a scene on click in a new browser tab
Embedded url inconsistency
Muting from outside document issue
Can i use link in the text area?
Hype Function flickers wallpapers
How to load a specific scene after exporting the all scenes using the Default custom slice
Accessing a specific scene from outside of a Tumult Hype document via QR code
Scene Link Function troubleshooting
Accessing a specific scene from outside of a Tumult Hype document via QR code
URL to a scene on a Wordpress page
URL link to scene not working
Hype in hype (doubleclick dcm)
Link to anchor between html scenes
How to edit the url of scenes?
Exporting scenes as web pages
Using javascript in an external quiz engine to jump scenes
Bookmark scene?
Jump to a scene based on the ID of the button
Linking scenes between slices
Run timeline onclick div
Using Hype Javascript in my Customized Javascript Outside of Hype
Draw a simple cartoon face with Hype Elements
Menu built in Hype linking to different scenes
Getting the index container name
File extension in web URL to get people to specific place in my site
Browser button javascript
Javascript Password - Switch or if/else?
Scenes vs Layouts (pages)
Going back to specific scroll point of the scene
Running Hype code returned from PHP
Scene Urls based on folders on a server
Starting with a different Scene
Parallax scrolling of various objects
Keep header remain when navigating to different links of a website
Best way to manage and preload multiple large scenes?
How to link a scene from the www
Browser reload/refresh stay on current scene
Start animation from external javascript function
Phonegap: Linking between scenes and optimizing memory usage
(Resolved) How to call scenes via content inside an HTML widget?
Linking to a hype scene from another hype document
Specify URL for scene

I moved 5 posts to a new topic: Load different Hype scenes in an iframe

Thanks Daniel …
One more issue, if possible, to explain how Internal Anchors can be added in Hype 3.0 Pro to the same for internal flicks in the page/scene navigation ?

Can you explain a bit more about what you’re trying to do? Does this help?

1 Like

Hi Daniel! How is another way of achieving this result but with no # on the links?

Can you tell me a bit more? Is there a reason why you want to avoid using the # character? You could potentially use ? or & instead.

1 Like

Thanks for the fast reply!

I’m a designer, so little I know about coding and programming. Therefore, I can only think that if my URL was instead of, and other pages were like instead of - the links would look cleaner.

It’s a stupid detail but I care about this stuff :stuck_out_tongue_winking_eye:

I hope there’s a way of achieving this, otherwise would be nice to see it in future Hype versions.

BTW - Hype is awesome, it allows me to release my creativity and deploy great web pages!

Totally understand -- I agree it's not the best-looking URL. At this time, since a Tumult Hype document exists on a single URL, you would need to create folder to hold each separate page. And each page would need to be exported using the name 'index' so that when you visit /privacy the 'index.html' page would be loaded.

1 Like

Gotcha! I’m using Amazon S3, gonna try to discover how to do that! Thanks! :smiley:

Worked like a charm! Thanks Daniel!

1 Like


This works great and have been using this for a while, is it also possible to add another parameter to the URL, basically I am try to set a global variable within this script?


where ? would be used for another script, this could be anything in reality.


Thanks Hans,

I think I understand how this works, hash[0] is the value after the #, subsequently hash[1] is the first value after the ?

so for a global variable I have added this as:
window.lang = hash[1];

Okay, How do I do this for right click?

Can we keep this in one thread @UXDJB?

1 Like

Hi this is my first post, i have a problem linking to timeline from outside of a Tumult Hype document, somebody could help me, how do it. Thanks!

1 Like

it’s well documented here :):


Hi, Hans. Thanks so much!

thanks so much Hans