Как сделать плавную прокрутку в Scrollmagic?

Question

[Анатолий Филиппов]

Здравствуйте! Выкачал один зарубежный сайт по просьбе заказчика, ему там нужно поменять скролл, вернее его изменить, чтобы при ручной прокрутке, когда заканчивалась секция переход на новую происходил автоматически, как это сделано с событием onclick сверху в меню.
Библиотеки там стоят scrollmagic и tweenmax. С утра уже ломаю голову никак не могу понять что с ними делать. Мне кажется собака зарыта где то в этом коде:

var scroll = (function ($) {
    var selectors = {
            window: window,
            document: document,
            body: 'body',
            wrapper: '.wrapper',
            bg: '.bg',
            sections: '.block',
            layout: '.layout',
            anchors: 'a[href*="#"]',

            // content
            welcome: '#welcome .block__inner',
            displays: '.item-display'
        },
        classes = {
            scrollable: 'scrollable',
            active: 'active'
        },
        settings = {
            isMobile: /(iPhone|iPod|Android).+AppleWebKit/i.test(window.navigator.userAgent),
            speed: 0.9  ,
            gap: 0,
            blur: {
                small: 8,
                large: 100
            },
            layoutAlpha: 0.85
        },
        controller,
        nodes = {};

    function scrollTo(event) {
        var target = $(this).attr('href').split('#');

        controller.scrollTo('#' + target[target.length - 1]);

        event.preventDefault();
    }



    function setup() {
        controller = new ScrollMagic();

        controller.scrollTo(function (newpos) {
            TweenMax.to(nodes.window, settings.speed, {scrollTo: {y: newpos + 1}});
        });

        nodes.anchors.on('click', scrollTo);
    }

    function desktop() {
        nodes.body.addClass(classes.scrollable);

        nodes.sections.each(function (index) {
            settings.height = nodes.window.height();

            var section = $(this),
                content = section.find('.block__inner--content'),
                item = section.find('.block__inner--item'),
                id = section.attr('id'),
                bg = section.data('bg'),
                color = section.css('color'),
                heightDiff = content.outerHeight() - settings.height;

            section.css('height', content.outerHeight() + (index === nodes.sections.length - 1 ? 0 : settings.height * settings.gap));


            // slide

            // in
            var timeline = new TimelineMax()
                .add([
                    new TweenMax.from(content, 1, {x: '100%', ease: Linear.easeNone}),
                    new TweenMax.from(item, 1, {x: '100%', ease: Linear.easeNone})
                ]);

            var scene = new ScrollScene({
                    triggerElement: section,
                    triggerHook: 1,
                    duration: settings.height
                })
                .setTween(timeline)
                .addTo(controller);


            // up
            timeline = new TweenMax.to(content, 1, {y: -heightDiff, ease: Linear.easeNone});

            scene = new ScrollScene({
                    triggerElement: section,
                    triggerHook: 0,
                    duration: heightDiff
                })
                .on('enter', function (bg, event) {
                    nodes.layout.css('background-color', bg !== 'transparent' ? hex2rgba(bg, settings.layoutAlpha) : 'transparent');
                }.bind(null, bg))
                .on('leave', function () {
                    nodes.layout.css('background-color', 'transparent');
                })
                .setTween(timeline)
                .addTo(controller);


            // item unpin
            if (item.length > 0) {
                timeline = new TweenMax.from(item, 0.5, {opacity: 0});

                scene = new ScrollScene({
                        triggerElement: section,
                        triggerHook: 0
                    })
                    .setTween(timeline)
                    .addTo(controller);
            }

            var unpin = content.find('.item-unpin');

            if (unpin.length > 0) {
                timeline = new TweenMax.to(item, 1, {y: -settings.height + 'px', ease: Linear.easeNone});

                itemUnpin = new ScrollScene({
                        triggerElement: section,
                        offset: content.outerHeight() - unpin.outerHeight(),
                        triggerHook: 1,
                        duration: settings.height
                    })
                    .setTween(timeline)
                    .addTo(controller);
            }


            // out
            timeline = new TimelineMax()
                .add([
                    new TweenMax.to(content, 1, {x: '-100%', ease: Linear.easeNone}),
                    new TweenMax.to(item, 1, {x: '-100%', ease: Linear.easeNone})
                ]);

            scene = new ScrollScene({
                    triggerElement: section,
                    offset: content.outerHeight(),
                    triggerHook: 1,
                    duration: settings.height
                })
                // .on('enter', function () {
                //     nodes.layout.css('background-color', 'transparent');
                // })
                .setTween(timeline)
                .addTo(controller);


            // anchors
            scene = new ScrollScene({
                    triggerElement: section,
                    triggerHook: 0.5,
                    duration: section.outerHeight()
                })
                .on('enter', function (id, event) {
                    // update anchors
                    $(selectors.anchors + '.' + classes.active).removeClass(classes.active);
                    $('a[href*="#' + id + '"]').addClass(classes.active);

                    // update layout color
                    TweenMax.to(nodes.layout, 0.3, {css: {color: color}});
                }.bind(null, id))
                .addTo(controller);


            // transition
            if (bg !== 'transparent') {
                var transitionElement = $('<canvas class="transition">');
                section.append(transitionElement);

                var transition = transitionElement.halftone({
                    origin: 'top right',
                    color: bg
                });
                section.data('transition', transition);

                scene = new ScrollScene({
                        triggerElement: section,
                        offset: -settings.height * settings.gap,
                        triggerHook: 1,
                        duration: settings.height * (1 + settings.gap)
                    })
                    .on('progress', function (id, event) {
                        if (event.progress !== 1) {
                            nodes.layout.css('background-color', 'transparent');
                        }

                        if (section.data('transition') !== undefined) {
                            var transition = section.data('transition');
                            transition.progress(event.progress);
                        }
                    }.bind(null, section))
                    .addTo(controller);
            }


            // populate sliders
            if (item.length > 0) {
                var slider = $('<div class="flexslider">'),
                    slides = $('<ul class="slides">');

                section.find(selectors.displays).each(function () {
                    var display = $(this);

                    slides.append('<li style="background-image: url(' + display.attr('src') + ');">');
                });

                slider.append(slides).flexslider({
                    animation: 'slide',
                    controlNav: false,
                    directionNav: false,
                    slideshow: false,
                    animationSpeed: 300,
                    animationLoop: false
                });

                item.find('.item__display').append(slider);

                // item displays

                section.find(selectors.displays).each(function (index) {
                    var display = $(this),
                        section = display.closest('.section__inner'),
                        item = display.closest(selectors.sections).find('.item__display');

                    var scene = new ScrollScene({
                            triggerElement: section,
                            triggerHook: 0.5,
                            duration: section.outerHeight()
                        })
                        .on('enter', function (item, index, event) {
                            item.find('.flexslider').flexslider(index);
                        }.bind(null, item, index))
                        .addTo(controller);
                });
            }
        });






        return; // kill blur for now

        // welcome blur
        var blurScene = new ScrollScene({
                offset: 30,
                duration: nodes.welcome.outerHeight() * 0.1,
                triggerHook: 0
            })
            .on('progress', function () {
                var progress = this.progress();

                TweenMax.set(nodes.welcome, {webkitFilter: "blur(" + (settings.blur.large * progress) + "px)"});
            })
            .addTo(controller);
    }

    return {
        init: function () {
            nodes = utils.createNodes(selectors);

            setup();

            if (!utils.isMobile()) {
                desktop();
            }
        }
    };
})(jQuery);

$(function () {
    scroll.init();
});

А вот собственно этот шаблон