2

I need to be able to jump to the middle of a tween that is lower down on the page and hasn't begun, and then begin the tween at the point where I jumped in.

When I click on the nav menu (seen as an unloaded image in the header), I need to be taken to the correct sliding panel, then have the scrolling continue from there. For example, if I click on "Degrees" in the menu, I want to be taken to the "Degrees" panel, then be able to scroll on to the next panel, "People".

The problem is when I get to the panel, the scrolling jumps back to the beginning, the first panel "About", instead of continuing on seamlessly. How do I fix this?

Link to jsfiddle to view full code (in "Employment" menu button event listener, you can see my attempts with play() and seek() and controller.ScrollTo(), perhaps using them in an incorrect combination).

// 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();
    })
brienna
  • 1,415
  • 1
  • 18
  • 45

0 Answers0