Is there a way to add actions on two finger swipe/slide on a scene?

Scenes
8

There is a pretty comprehensive tutorial on how to detect scrolling and run timelines and the like: http://blog.tumult.com/2014/08/06/tutorial-easily-create-parallax-effects-and-single-page-scrollable-experiences-in-tumult-hype/

The code to control a timeline based on the scroll direction is copied below:

function wheel2(event) { // other browsers
        event.preventDefault();
        if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
        } else {
            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 {
            hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)     }
    }

window.onmousewheel = document.onmousewheel = wheel;
    window.addEventListener("DOMMouseScroll", wheel2, false);
    document.addEventListener("DOMMouseScroll", wheel2, false);

If you run this ‘on scene load’ it will commandeer the Main Timeline.

Be careful with scroll jacking: it intercepts the intention of the user (to scroll to a different part of the web page). Tapping, dragging (click + drag) and scrolling to a point (as we do in waypoint actions) are intentional. These are events that can be listened to, as opposed to modes of navigation that are intercepted (as in the case of capturing scrolling).

Worth a read: http://www.sitepoint.com/scrolljacking-accessibility/

2 Likes