Tumult Hype exposes a number of powerful JavaScript API functions that make it easy to remember the current state of your animation. The demo below shows how to return to the last played state of a scene. In other words, if we had a 10 second scene, but we only saw 5 seconds of the animation, we can easily return to that scene and pick up where we left off.
By default, scenes start from the beginning whenever they are loaded, but this technique makes it possible to load a scene from its last position: 5 seconds into the timeline, 10 seconds, or at whatever point the user last viewed (even 3.445 seconds).
The first thing to do is to create a variable that remembers the current time when you leave a scene. To do this, create a ‘On scene unload’ JavaScript function that runs this script:
window.currentTimeForScene1 = hypeDocument.currentTimeInTimelineNamed('Main Timeline');
In our example, this will record the current state of scene 1 when we exit it and switch to scene 2. Now, we can use the ‘currentTscene1’ variable wherever we want the exact value in seconds of the ‘played time’ for that scene. When we return to that scene, we’ll be using this variable to jump back to that moment. But we only want to jump back to that moment if we’ve visited that scene (and viewed more than 0 seconds of the timeline). We’ll run this JavaScript function as an ‘On Scene Load’ function when viewing the first scene:
if (window.currentTimeForScene1 != null) {
hypeDocument.goToTimeInTimelineNamed(window.currentTimeForScene1, 'Main Timeline');
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
} else {
// use this space for something if the timeline has not been played.
}
To set this up for multiple scenes, you’ll need to use different variables (such as currentTimeScene2) to record and jump to different points in time.
The Tumult Hype document attached here demonstrates this technique:
Return to last position.hype.zip (25.5 KB)