ScrollMagic - TimelineMax with Anchor Link On Page Parallax Scrolling - gsap

Question

I am using ScrollMagic plugin for parallax scrolling effect. Below is my code
HTML Code
<div style="position:fixed;right:50px;top:50px;width:200px;height:300px;background:#fff;z-index:1">
<div>ONE</div>
<div>TWO</div>
<div>THREE</div>
<div>FOUR</div>
</div>
<div id="pinContainer">
<div id="slideContainer">
<section class="panel blue">
<a id="one"></a>
<b>ONE</b>
</section>
<section class="panel turqoise">
<a id="two"></a>
<b>TWO</b>
</section>
<section class="panel green">
<a id="three"></a>
<b>THREE</b>
</section>
<section class="panel bordeaux">
<a id="four"></a>
<b>FOUR</b>
</section>
</div>
</div>
JAVASCRipt Code
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to("#slideContainer", 0.5, {z: -150}) // move back in 3D space
.to("#slideContainer", 1, {x: "-25%"}) // move in to first panel
.to("#slideContainer", 0.5, {z: 0}) // move back to origin in 3D space
// animate to third panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-50%"})
.to("#slideContainer", 0.5, {z: 0})
// animate to forth panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-75%"})
.to("#slideContainer", 0.5, {z: 0});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "500%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
// change behaviour of controller to animate scroll instead of jump
controller.scrollTo(function (newpos) {
TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
});
// bind scroll to anchor links
$(document).on("click", "a[href^='#']", function (e) {
var id = $(this).attr("href");
if ($(id).length > 0) {
e.preventDefault();
// trigger scroll
controller.scrollTo(id);
// if supported by the browser we can even update the URL.
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
}
});
});
How to achieve the anchor scrolling functionality using scrollmagic plugin.
Using above code when I click on anchor link its not going to the particular section.

Answer 1

I had the same problem today.
Try to replace the "window" element with your "#pinContainer" element.
Change your code from:
controller.scrollTo(function (newpos) {
TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
});
to:
controller.scrollTo(function (newpos) {
TweenMax.to($('#pinContainer'), 0.5, {scrollTo: {y: newpos}});
});
Hope that helps.