Как перейти на середину шкалы времени / анимации и продолжить с этой точки

Question

Мне нужно иметь возможность перейти к середине анимации, которая находится ниже на странице и еще не началась, а затем начать анимацию с того места, где я прыгнул.

Когда я нажимаю на навигационное меню (которое отображается в виде выгруженного изображения в заголовке), мне нужно перейти на правильную скользящую панель, а затем продолжить прокрутку. Например, если я нажимаю "Степени" в меню, я хочу перейти на панель "Степени", а затем перейти к следующей панели "Люди".

Проблема в том, что когда я попадаю на панель, прокрутка возвращается к началу, к первой панели "О программе", вместо того, чтобы продолжать плавно. Как это исправить?

Ссылка на jsfiddle для просмотра полного кода (в прослушивателе событий кнопки меню "Занятость" вы можете увидеть мои попытки с play() а также seek() а также controller.ScrollTo()возможно, используя их в неправильной комбинации).

// Initialize ScrollMagic controller
var controller = new ScrollMagic.Controller();

// Define movement of panels
    var wipeAnimation = new TimelineMax()
        .to("#slideContainer", 1,   {x: "-11.11%"})    // to Degrees
        .to("#slideContainer", 1,   {x: "-22.22%"})    // to People
        .to("#slideContainer", 1,   {x: "-33.33%"})    // to Research
        .to("#slideContainer", 1,   {x: "-44.44%"})    // to Employment
        .to("#slideContainer", 1,   {x: "-55.56%"})    // to Employment2
        .to("#slideContainer", 1,   {x: "-66.67%"})    // to Employment3
        .to("#slideContainer", 1,   {x: "-77.78%"});   // to Resources

    // Create scene to pin and link animation
    var scene = new ScrollMagic.Scene({
            triggerElement: "#pinContainer",
            triggerHook: "onLeave",
            duration: "600%"  // slows down scrolling
        })
        .setPin("#pinContainer")
        .setTween(wipeAnimation)
        //.addIndicators() 
        .addTo(controller);

    /**************************** MENU ****************************/

    $('.menu-btn').each(function(index, element) {
        $(this).on('click', function() {
            var name = $(this).text();
            if (name == "Degrees") {
                wipeAnimation.seek(1);
                wipeAnimation.play(1);
            } else if (name == "People") {
                wipeAnimation.seek(2);
            } else if (name == "Research") {
                wipeAnimation.seek(3);
            } else if (name == "Employment") {
                //wipeAnimation.seek(4);
                //controller.scrollTo('#start');
             //   controller.scrollTo('#employmentAnchor')
            //scene.progress(0.56);

                //wipeAnimation.play(4);

                //alert(scene.progress());
                //scene.progress(0.5);
                //controller.scrollTo('#start');

                //alert('current pos: ' + controller.scrollPosMethod());
                //wipeAnimation.play(4);
                //wipeAnimation.start();
                //wipeAnimation.play(4);
            } else if (name == "Resources") {
                wipeAnimation.seek(5);
            }
        });
    })

    $('.menu').on('click', function() {
        $('nav').show();
    })