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();
})