Our good friends at Survey Legend have shared a great tutorial with us on creating a single-page website built for navigating by scrolling. This technique is a great way to build what appears to be a long scrollable page, but is actually a single scene through which the user moves.

Check out the tutorial below, or download the example file to see how it’s built in Tumult Hype.

The core workflow for this technique is a single scene with elements that animate in and out of the scene. Each animation pauses at a timeline action created for a section:

To move between these timeline actions, a small snippet of JavaScript loads when the scene loads. This JavaScript detect a change in the scroll direction and amount, and continues or reverses the main timeline. Run this JavaScript ‘On Scene Load‘ for any scene you’d like it enabled:

function wheel2(event) { // other browsers
        event.preventDefault();
        if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
        } else if (event.detail <= 0) {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)     }
    }
    function wheel(event) { // Firefox
        event.preventDefault();
        if (event.wheelDeltaY > 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
        } else if (event.wheelDeltaY <= 0) {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)     }
    }
    window.onmousewheel = document.onmousewheel = wheel;
    window.addEventListener("DOMMouseScroll", wheel2, true);
    document.addEventListener("DOMMouseScroll", wheel2, true); 

Use the above script whenever you want scrolling on a desktop computer to control the direction of the main timeline. For mobile support, use the built-in Drag actions to control your timeline. You may want to create a different document for Mobile Devices, with different timeline timing — a Drag action to control the timeline may not animate the document at the speed you’d like. Please read our Touch & Mobile documentation chapter for more tips.

Since documents within a single scene may lead to large amounts of images loaded in a single document, we recommend using SVG or vector-based graphics. Be aware of what images in your resource library ‘preload’ as this will slow down the initial display of your document.

Here’s a simpler version of the technique if you’d like to begin with an empty document.  If you have any questions, get in touch @hypeapp.

Thanks to Survey Legend for this tutorial!