Prevent All Scrolling Until A Function Triggers

I'm trying to recreate this effect: http://www.jam3.com/work/#mobilemusicvideo All scrolling of the page is disabled until the animation of the top image completes. BUT, that imag

Solution 1:

Thanks to @ChrisFrank for the tip. You could trigger the function on scroll attempt and disable scroll like this:

document.onscroll = function() {
    if( scrolled == false){
        yourCustomFunction();
    }
}

And inside my custom function, I disable scroll (I got this function here), do my animation and change the variable to true:

functionblogHeaderMagic() {
     //to re-position scroll to 0 (in my case this was useful)
     $('body,html').animate({scrollTop: 0 }, 1);

     //disable scroll functiondisableScroll()

     //my animation and on a callback you'll see I call allowScroll function to allow scroll normally once animation completesTweenMax.to("#post-hero-media-wrapper", 1, {height:54, opacity: .4, width: mainWidth, ease: Power3. easeInOut, y: 0, onComplete: allowScroll });
     scrolled = true
}