Continue Timeline when scrolling

Using JavaScript with Hype
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.

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

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
}
1 Like
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

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.

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

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
}
3 Likes
9

Hey guys,

Similar/related issue. I’m trying to figure out how to continue (scroll down) and play in reverse (scroll up) a specific timeline within a symbol by using the mouse wheel. I’ve tried the above code and inside the symbol and changed the timeline name but I’ve not had any success. Any ideas on JS that would allow me to do this?

10

You could combine the above script with this method of playing a symbol’s timeline:

hypeDocument.getSymbolInstanceById(SymbolId).continueTimelineNamed('Timeline in Symbol', hypeDocument.kDirectionReverse);

You’ll need to give your symbol an ID of SymbolId and a Timeline name of Timeline in Symbol, or whatever you choose.

Here’s a few additional functions that may interest you for controlling a symbol’s timeline: Unable to play Symbol timeline

11

Hi Daniel,

I’m still having trouble with this and can’t get it to work. Here is a copy of my code combined with your suggestion. I’m a beginner to JavaScript so I don’t really know much.

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

Can you share your Hype document so I can dig in?

13

Hey Daniel,

Just got back to my computer for the night. Here is a sample of what I’m trying to accomplish with mouse scrolling. Swiping is working fine on mobile but I want the same for scrolling to happen.

Landing Test.zip (18.2 KB)

14

There’s a few issues with your code:

  • you never invoke the runOnLoad function; you’ll want to do this On Scene Load
  • you are using hypeDocument.getSymbolInstanceById(Scroll) throughout that function, but Scroll is a name of a symbol so it needs quotes around all usages: hypeDocument.getSymbolInstanceById("Scroll")
  • Your conditions for going forward/reverse aren’t quite right, but you’ll at least be able to see some results with the first two steps where you can now debug this and figure out the correct forward/reverse conditions.