Conflicting libraries: Fullpage.js and ScrollMagic issue

Question

So I am making a vertical parallax scrolling website with different sections and I want to navigate between them. So I have chosen ScrollMagic for parallax and fullpage.js for navigating. I have included fullpage.js CSS file in my header.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.7/jquery.fullPage.css">

Issue is when I try to have them both. So my code in between <body> tags is

<div id="fullpage">
        <div class="spacer s0"></div>
        <div class="section">
            <div id="parallax1" class="parallaxParent">
                <div style="background-image: url(img/bcg_slide-1.jpg);">
                </div>  
            </div>
        </div>
        <div class="spacer s1">
            <div class="box2 blue">
                <p>Content 1</p>
            </div>
        </div>
        <div class="spacer s0"></div>
        <div class="section"></div>
            <div id="parallax2" class="parallaxParent">
                <div style="background-image: url(img/bcg_slide-2.jpg);"></div>
            </div>
        <div class="spacer s1">
            <div class="box2 blue">
                <p>Content 2</p>
            </div>
        </div>
        <div class="spacer s0"></div>

        <div class="section">
            <div id="parallax3" class="parallaxParent">
                <div style="background-image: url(img/bcg_slide-3.jpg);"></div>
            </div>
        </div>
        <div class="spacer s2"></div>
        <div id="trigger1" class="spacer s0"></div>
        <div>
        <svg height="150" width="460" style="position: absolute; z-index: 10;">
            <path id="line" d="M 100 100 l 360 0" stroke="red" stroke-width="3" fill="none" />
              <!-- Mark relevant points -->
              <g stroke="black" stroke-width="3" fill="black">
                <circle id="pointA" cx="100" cy="100" r="3" />
                <circle id="pointB" cx="450" cy="100" r="3" />
              </g>
              Sorry, your browser does not support inline SVG.
            </svg>
        </div>
        <div id="fp-nav" class="right" style="margin-top: -33.5px;">
            <ul id="nav">
                <li>
                    <a href="#parallax1" class=""><span></span></a>
                    <div class="fp-tooltip right">First</div>
                </li>
                <li>
                    <a href="#parallax2" class=""><span></span></a>
                    <div class="fp-tooltip right">Second</div>
                </li>
                <li>
                    <a href="#parallax3" class=""><span></span></a>
                    <div class="fp-tooltip right">Third</div>
                </li>
            </ul>
        </div>
    </div>

And at the bottom I declare my jquery libraries just before closing my </body> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/_main.js"></script>
<script src="js/fullpage.js"></script>

I want to have a smooth scroll to section. Maybe any other ways of doing it. I definetly need Scollmagic as I will be drawing SVG's and doing other animations which require triggers

FullPage.js already have Smooth Scroll to section function, I think you don't need to use ScrollMagic for this. — Pedram, Feb 10 '16 at 13:28
Well, I need ScrollMagic for SVG drawing and other things for future — Andrejs Gubars, Feb 10 '16 at 13:32
Well actually I found one tweek if I set `scrollBar: true` for `fullpage.js` it navigates smoothly, but now I cannot scroll with my keyboard or mouse — Andrejs Gubars, Feb 10 '16 at 13:41

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

If you take a look at fullpage.js FAQs you'll find this:

Parallax doesn't work with fullpage.js.

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 10 '16 at 14:25

Alvaro

40,778
30
164
336

Great :) I accept it as an answer. I have actually found this like 20 minutes ago, took me a while. – Andrejs Gubars Feb 10 '16 at 14:29
@AndrejsGubars any advises to make it easier to find? – Alvaro Feb 10 '16 at 14:33
Actually I have been playing with settings from official documentation of `fullpage.js` and magically it worked :) i found it in one of the issues on github https://github.com/alvarotrigo/fullPage.js/issues/150 and if you look at the last comment, the author explains what to do. – Andrejs Gubars Feb 10 '16 at 14:38
1

Well, I'm the author :) And I also provided to you with the same solution in the answer here. Nothing that I didnt tell you. – Alvaro Feb 10 '16 at 15:22
1

@Alvaro, you're a legend dude ! I can't express how I am obsessed with fullpage.js !!! – Itachi Sama Feb 09 '18 at 00:46

Conflicting libraries: Fullpage.js and ScrollMagic issue

1 Answers1