How to "Scroll Synchronize" using Scroll Magic

Using JavaScript with Hype
2

@elcalibano

I found and adapted the following from a post by @h_classen... (search term "scroll" - it's usually good to go general and cast a wide net when your specific searches are coming up empty, even though it takes a little more sorting through the pile).

scroll_JHSv1.hype.zip (16.6 KB)

Hans' original post:

Hans' Hype project file (in the thread) used the scroll wheel as its engine (straight javascript); with a little futzing I got the script below to work with a scrollbar.

     window.onscroll = function() {scrollTest()};
     function scrollTest() {
     whatScroll = ((document.body.scrollTop) / 100);
     hypeDocument.goToTimeInTimelineNamed(whatScroll, 'Main Timeline');
    }

Note: The "100" in the code above gives more granularity to the animation, without it the animation is jumpy. You can also experiment with another number.


Hans' script (there is also another "On Screen Load" script he uses which is where "step" comes from):

if (window.addEventListener) {
window.addEventListener("mousewheel", getScrollDir, false);
//FF
window.addEventListener("DOMMouseScroll", getScrollDir, false);
}


function getScrollDir(e){

	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
	
	if(delta === -1){
	newTime = hypeDocument.currentTimeInTimelineNamed(timelineNameToControl) + step;
	hypeDocument.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	
	}else{
	newTime = hypeDocument.currentTimeInTimelineNamed(timelineNameToControl) - step;
	hypeDocument.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	}
	

}
1 Like