Change scenes by scrolling

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

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

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

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

thank you andrew and strmiska,

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

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

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

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

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


}
1 Like

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?

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

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.

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 ?