In this tutorial I will show you what you need to do in order to stop the page scroll at a certain section with scroll magic, and after the animation is done the scroll page start again. Beside the method I will show you in the following, there are other methods but most of them are hard to be implemented and difficult to control, because there are a lot of browsers and some of them will read your code how it wants, and then you must to check on mobile devices especially on safari from iOS devices. Using Scroll Magic you will have to only add your custom animation and set the start point where the scroll should be stopped.

This tutorial assume that you already added scroll magic to your website and I will show only the code you need to add in order to achive the stop scrolling functionality. If you haven't scroll magic in your website go on google and download the library, you will see you have a lot of files to upload to your website, but this is another discussion.

So, in order to scroll magic stop the page scroll where you want, you need to create an empty element let's say a <span> and put it exactly where you want the scroll stop, when you will scroll on the page when the top part of page will hit your <span> the scroll will stop until the animation is done.

Your jquery code for this animation should look like the following:

jQuery(function(){          
	var controller = new ScrollMagic.Controller();
    wipeAnimation = new TimelineMax()
        .to('.item1', 1, {'opacity':'1'})
        .to('.item2', 1, {'opacity':'1'})
        .to('.item3', 1, {'opacity':'1'})
                                                                    
	new ScrollMagic.Scene({
		triggerElement:"#my_section",
		triggerHook:"onLeave",
		duration:"500%",
		reverse:true
	}).on('start', function (event) {
        wipeAnimation.time(0);
    })
	.setPin('#my_section')
	.setTween(wipeAnimation)
	.addTo(controller);
});

Using the above function when an user scroll on page and find my_section section the scroll will be stopped until the last item "item3" will have opacity:1, then the scroll will start again. Using the reverse:true we tell to scroll magic to make the animation in reverse way when you scroll from bottom to top. In my opinion this is the easiest way to stop page scroll using jquery. Let me know if you know other methods. This method is tested on mobile devices too and it is working.