Scrolling a timeline with mouse wheel

1

Here is what I am using for this, results are very smooth:

Replace “Main Timeline” with the timeline you want to drive
Change the [time -=.02] and [time +=.02] to adjust scroll speed
Adjust the if [time < 12] bits to match the length of your timeline.

    var time = hypeDocument.currentTimeInTimelineNamed('Main Timeline');

    ///// scroll timeline
    function wheel(event) { // Firefox
    	event.preventDefault();
    	if (event.wheelDeltaY > 0 && time > .01) {
    		//console.log("up");
    		time -=.02;
    		
    		hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');

    	} else if (time < 12) {
    		//console.log("down");
    		time +=.02;
    		hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');
    	}
    }


    function wheel2(event) { // other browsers
    	event.preventDefault();
    	if (event.detail < 0 && time > .01) {
    		//console.log("up");
    		time -=.02;
    	
    		hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');

    	} else if (time < 12) {
    		//console.log("down");
    		time +=.02;
    		hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');
    	}
    }


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

That works indeed great! :heart_eyes:

Edit:
There is just one thing, if I put this on (On Scene Load) it affects the next scene too.
So is that the right place to use this script?
mouse_scroll.zip (98.0 KB)

1 Like
3

Huh, that is really odd.

This seems to me to be a bug. @Daniel ?

The Main timeline on the second scene is def picking up the scroll instructions??

4

That is super odd – I don’t know why this is happening. The Main timeline isn’t even named – it’s just identifying the ‘scrolling’ timeline.

5

well, the events are registered on window and document … so for sure will affect other scenes.
you will have to remove listeners when switching the scene …

6

This has been fixed in v4. (Hype v3 was overly lenient to default to the Main Timeline if the specified timeline wasn’t found.)

As a side note, glancing at the code you’re calling addEventListener but should probably also have a corresponding removeEventListener at some point.

Another note: the time variable is based on a timeline called “rapport_scrubber” that does not exist.