1

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

1

2 Answers 2

0

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.

1
  • I don't just want my text to fade in or out. This was just for the test page i created. For the animations I want to go beyond whats possible with CSS and juse javascript. So I think using the active class added to the body is not working for me. What do I have to do to use the callbacks? What code do I have to insert here to get the animations working generated by webflow? Feb 9, 2015 at 13:42
0

I solved how to run SCROLL animations in WEBFLOWE if you use FULLPAGE.JS. To scroll ANCHOR, after refreshing for each ANCHOR, refresh the scrolla position as follows:

$(document).ready(function() {
      $('#fullpage').fullpage({
      	 anchors: ['01', '02', '03', '04', '05'],
         animateAnchor: true,
         easing: 'easeInOutCubic',
         scrollingSpeed: 600,
         scrollOverflow: true,
         scrollOverflowReset: true,
         //
         afterLoad: function(origin, destination, direction){
    	 var loadedSection = this;
         //refresh scroll position
         $.fn.fullpage.setAutoScrolling(false);
         $.fn.fullpage.setAutoScrolling(true);
         //
         if(origin.anchor == '01'){

    		 }
         if(origin.anchor == '02'){

    		 }
         if(origin.anchor == '03'){

     		 }
         if(origin.anchor == '04'){

    	 	 }
         if(origin.anchor == '05'){

    	 	 }
    	}
    	});
});

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.