Webflow and Fullpage.js interfering with each other

I am currently using the fullpage.js plugin on a test website I designed with webflow. Everything worked correctly until I included the plugin. Now, the scrolling interactions of webflow don't work anymore.

I think the two javascript files kind of interfere with each other, limiting functions of the other one to work correctly. I would love to fix this but I really don't know how.

This is the site without the fullpage.js included. This is the site with the fullpage.js included. As you can see, in the first example the paragraphs fade in and out on scrolling. In the second example they don't. The paragraphs simply stay in their initial appearance state which is opacity = 0. I really would love to see the fullpage.js working side by side with the webflow interactions.

This is the html code:

<body>
  <div class="pagewrap">

     <div class="section blue01">
       <div class="w-container">
         <p data-ix="scroll-fade-in"></p>
       </div>
     </div>
     <div class="section blue02">
       <div class="w-container">
         <p data-ix="scroll-fade-in"></p>
       </div>
     </div>
     <div class="section blue03">
       <div class="w-container">
         <p data-ix="scroll-fade-in"></p>
       </div>
     </div>

  </div>
</body>

This is the javascript code:

<script type="text/javascript" src="js/webflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
            $('.pagewrap').fullpage({
                'verticalCentered': true,
                'css3': true,
                'navigation': true,
                'navigationPosition': 'right',
                });
        });
  </script>

This is the CSS code:

.section.table,
.slide.table {
  display: table;
  width: 100%;
}
.tableCell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
.easing {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.section {
  height: 100vh;
}
.section.blue01 {
  background-color: #3cb7e8;
}
.section.blue02 {
  background-color: #3ccbe8;
}
.section.blue03 {
  background-color: #3ce2e8;
}
html.w-mod-js.w-mod-no-ios *[data-ix="scroll-fade-in"] {
  opacity: 0;
}

This is where you can find the two included javascript files:

jaroquastenberg.de/_x/help/01/js/webflow.js

jaroquastenberg.de/_x/help/01/js/jquery.fullPage.js

Is there maybe anyone who is good at javascript and can find out where the two scripts conflict with each other?

Thanks in advance!

Jaro

Solution

You'll find the answer in fullPage.js FAQs:

jQuery scroll event doesn't work

Same answer as Parallax doesn't work with fullpage.js

Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.

And:

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.

If you just want your text to fadeIn or out, I would use the CSS class added to the body on page change. But feel free to use the callbacks as well combined with javascript or jQuery to create your effects.