Change scenes by scrolling

Using JavaScript with Hype
1

hello,
is it possible to go from one scene to another by scrolling the mouse down or up? I think I would need java script. do you have an example?
thank you
thomas

1 Like
2

You can do this now, of a sort. But you cannot, easily, step the process.

You can bind a mouse wheel event and use pushBottomToTop scene transition.

So you would create a function on the first scene loading. I call it appLoad:

if (window.addEventListener) {
	window.addEventListener("mousewheel", scrollScene, false);
}

function scrollScene(e){

var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

if(upORdown === -1){
	hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushBottomToTop, 2.1)
}else{
	hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushTopToBottom, 2.1)
}
    
}

And bingo, here is a working example:

scrollingScenes.hype.zip (99.4 KB)

2 Likes
3

this is cool - but there´s a problem with the logically scrolling direction.
if i want to scroll to scene 2, i have to move the wheel up and the scene should load from bottom to top.
so i changed:

if(upORdown === 1){
hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 2.1)
}else{
hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 2.1)
}

4

Thanks @MrAddy & @strmiska

Here’s a tutorial for controlling a timeline, which can be modified to jump to a scene: http://blog.tumult.com/2014/08/06/tutorial-easily-create-parallax-effects-and-single-page-scrollable-experiences-in-tumult-hype/

1 Like
5

thank you andrew and strmiska,

works great. but not on firefox :frowning:
I cant code. so do you have an idea.
thank you
thomas

6

true - doesn´t work on firefox. sorry, i don´t have a solution right now.

7 
window.addEventListener("mousewheel", scrollScene, false);
window.addEventListener("DOMMouseScroll", scrollScene, false);

I haven’t tested and the values might be reversed. But the second event listener is supposed to be the Firefox equivalent.

2 Likes
8

thank you, I will try to edit it into js!

9

thanx - it´s working:

if (window.addEventListener) {
	window.addEventListener("mousewheel", scrollScene, false);
	window.addEventListener("DOMMouseScroll", scrollScene, false);
}

function scrollScene(e){

var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

if(upORdown === 1){
	hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 2.1)
}else{
	hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 2.1)
}


}
2 Likes
10

I have a question for this code. Is it possible to “unload” the script so when I reach certain page the “jump scene” with the scroll mouse stop working?

11

You would need to use removeEventListener and whenever / wherever you want to remove it use:

window.removeEventListener("mousewheel", scrollScene);
window.removeEventListener("DOMMouseScroll", scrollScene);
2 Likes
12

hello,
i have make a animation with multi scene with the function scrollScene than is launch in the load of the first scene.
but when i use exactly
window.removeEventListener(“mousewheel”, scrollScene);
window.removeEventListener(“DOMMouseScroll”, scrollScene);

it doesn’t work, the scrollScene is alway active.

have you an idea.
thank you.

13

The tutorial is great, I’ve been hoping for scroll wheel functionality in hype for a long time. Unfortunately it seems a bit sporadic, sometimes it scrolls in the correct direction, other times it goes the wrong way, which is a real shame. Any plans to put a more bullet proof version in the next release of Hype ?

14

Hello,

I would like to use this solution (with the scrollScene function), but I have a question: is it possible to scroll the contents of the window- scene first (overflow: scroll), and only then activate the function to go to the next scene.

Can this function be activated only when the screen reaches a certain height (or top or bottom of the scene)?

for example, something similar to:

if (screen.height => 1000), then scrollScene will be activated

Thank you
Tomasz[

scrollingScenes.hype.zip (86.2 KB)

15

Yes, this can be done. You’d modify the scrollScene() function in appLoad() to look something like:

function scrollScene(e) {

    var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    if (upORdown === 1) {
    	if(window.scrollY == 0) {
	        hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 0.50)
	    }

    } else {
    	if(window.scrollY + document.body.clientHeight == document.body.scrollHeight) {
            hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 0.50)
        }
    }

}

This worked for basic testing for me in Safari, but I seem to recall that older browsers may have different variables for getting the proper viewport and window sizes. You might want to test and see if it works widely; if not more research may be required but fundamentally I think all browsers can get this data to add to your conditional.

2 Likes
16

Thank you,

best regars
Tomasz T.

18

I wonder if it is possible to modify this function in such a way that, in addition to support mouse wheel button (“wheel”) add gesture support on your iPad / iPhone - instead of the SwipeUp / SwipeDown

I tried with “touchmove” “touchend” and “touchstart”, but all I could do was scroll the scenes down, not up :slight_smile:

I will be grateful hint

best regards
Tomasz T.

19

I would guess the problem is due to:

    var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

Touch events don’t have a delta, so you would need to keep track of that yourself to determine the direction.

1 Like
20

Hah,

I was trying out the old code from the tutorial @Daniel mentions.

And realised that all of the browsers where in fact using the window.onmousewheel event which was supposed to be for Firefox. except Firefox,

Glad I came back and actually ready this thread.

So I assume Firefox is not ready soon enough.
Also I am not sure it has been mentioned, but the duration in the scene change is important.

Too short a time may mean you get over scroll and shoot past a scene.
Which makes sense, if we are still inside a scroll event while transitioning.

I was getting this problem

I found at least 1.5 is safe to stop this.

Again @strmiska your code snippet made me think about the timing being the issue here and changing that from the initial 1.1. When I noticed you had 2.1 which seemed a long time, got me to think why..

Cheers.

A little update.

You may want to still preventDefault() on the scroll. Maybe to stop a jitter in say Chrome at the beginning of scroll.

Chrome is actively ignoring preventDefault() in some cases. They introduced passive listeners .
Not got into them but you can still use

function scrollScene(e){
e.preventDefault()
...

by adding { passive: false }

onto the Listener.

window.addEventListener("mousewheel", scrollScene,  { passive: false });
window.addEventListener("DOMMouseScroll", scrollScene,  { passive: false });
1 Like
21

hello! that was a very long time ago. i don't even know where i was at that time :slight_smile:

as far as i can remember, i only copied the code from mrAddy. he used the 2.1.

1 Like