Continue Timeline when scrolling


(mg1) #1

Hey guys,

I found this tutorial and have problems implementing it in hype3:

It just says “use this script”. Unfortunately I can’t insert it exactly as shown, as I can only add single js functions.

Does anyone have a more detailed approach based on that tutorial?


#2

I think you’re referring to this script, right?

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);

To set this to run ‘on scene load’, you’ll go to the scenes where you want to use it (it could be multiple scenes), open the ‘Scene’ inspector, and create an ‘On Scene Load’ --> ‘Run JavaScript’ action. You can then paste the above code in. This code assumes that your animation occurs on the Main Timeline of your document.

You can see this script in place by downloading the example file as well.


Using Processing.js with Hype
Is there a way to scroll from scene to scene?
(Arjun Mahesh) #3

@Daniel Is there a way to disable this effect for mobile and iPad screensizes, so scroll only continues timeline on desktop, but then on smaller screens returns to normal scroll behavior?

Thanks


(Hans-Gerd Claßen) #4

above provides a quite save detect.

your check would something like:

 var md = new MobileDetect(window.navigator.userAgent);
var isMobile = md.mobile() 

if(!isMobile){

//do your desktopwork
}else{
//optional mobilestuff
}

(Arjun Mahesh) #5

Thanks @h_classen for the response! I think this doesn’t work however if I were to resize my window on desktop to a small size as the scrolling would still be prevent by event.preventdefault();

Is there a way to negate event.preventdefault(); ? Then I could add an event listener for window resizing and then prevent or allow scrolling based on the layout breakpoints in Hype


(Jonathan Deutsch) #6

The Hype API has a function hypeDocument.currentLayoutName() that you could use to detect which layout is being shown, and then modify behavior based on that.


(Hans-Gerd Claßen) #7

the library does not check for width /size but for device …

this is tricky and not necessary. the best and cleanest approach is to work with conditionals.
say within your scrolling function you’ll only run your intended action if some conditions (e.g. screensize …) are matched


(Arjun Mahesh) #8

@jonathan @h_classen thanks for the help! I was able to get the correct functionality by simply adding a conditional to the provided solution:

if (hypeDocument.currentLayoutName() == “Desktop”) {
event.preventDefault(); //etc
}