Search code examples
javascripthtmlcssgsapscrollmagic

ScrollMagic - Mousewheel and Trackpad Stopped Working


I'm using ScrollMagic to do parallax section scrolling following this tutorial. I have it working visually, but now the page has stopped scrolling when using the mouse wheel or the track pad. The only way that it will scroll is by dragging the scroll bar on the right.

main.css

.parallaxParent {
    height: 100vh;
    overflow: hidden;
}
.parallaxParent > * {
    height: 200%;
    position: relative;
    top: -100%;
}

index.html

<head>
    ...
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <div id="parallax1" class="parallaxParent picture-frame">
    <div style="background-image: url(../images/website/some-image.jpg); background-repeat:no-repeat; background-size:100% 100%;"></div>
    </div>

    <div class="small-text-frame text-align-center">
        blah blah blah        
    </div>

    <!-- Include ScrollMagic and GSAP plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
    <script src="js/scroll_magic.js"></script>

</body>

scroll_magic.js

// init controller
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
                .setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax2"})
                .setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax3"})
                .setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

This all follows their tutorial, which works perfectly. Clearly I've done something wrong, but I don't know what. The problem manifests in both Chrome and Firefox.

Thanks for any advice!

EDIT

It was pointed out to me that there is some error logging in the console that I hadn't noticed. All of the errors that generate on the page load are essentially debugging errors that I am fine with. However, when I attempt to scroll the page with my mousewheel, all of a sudden this error starts to get generated literally hundreds of times:

Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present.

and its source is TweenMax.min.js:16

Did some digging into this and found a couple of posts. It looks like I am missing a GreenSock plugin, but I thought that my script tags should have picked this up. I've tried a number of things to get this plugin, but nothing is working. For example, I tried adding this line:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>   

Does anyone know how I can include this plugin into my project? I'd strongly prefer to do it with an external reference rather than copying an entire project onto my server.


Solution

  • With full credit to @Shikkediel in the comments above, the solution here was simply to add this line just before the </body> tag (where the other script tags already existed):

    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
    

    So, the complete group of scripts related to making ScrollMagic work with parallax sections is this (ignoring debugging tags for debugging):

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- Include ScrollMagic and GSAP plugin -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
    <script src="js/scroll_magic.js"></script>