ScrollMagic - TimelineMax with Anchor Link On Page Parallax Scrolling

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><a href="#one">ONE</a></div>
<div><a href="#two">TWO</a></div>
<div><a href="#three">THREE</a></div>
<div><a href="#four">FOUR</a></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.