Fullpagejs & Webflow Conflict

Hello,
I’m using webflow and i’m happy about using it.
I’m using Fullpage plugin and i’m more than happy about using it too.

It works well, except one thing, it stops the native animations “onscroll” from working.
Basely, I have a menu created by Webflow and i set an effect to make the text change color when the section is on the screen… but from the moment i added fullpage, it does not change anymore.
Last point to notice, is the effect works only at the right moment i re-size the navigator window.

I’m not sure that i’m expressing my self very well, but it will be really great of you if you could help me.

Thank you very much for taking my request on consideration.

Hi @slimbl,

Could you share read-only link to your project and link to published site, please? It would help to find the reason of this issue.
Have to notice, that usually Webflow do not support issues in 3rd side plugins code. But we have our “JavaScript ninja” @bartekkustra :slight_smile: which is in Webflow team now, maybe he will find the way.

Regards,
Anna.

1 Like

Hi @slimbl, further to what @sabanna said, you can find out how to share your sites read only link here: How to Enable a Webflow Share Link - #10 - Webflow Tips - Forum | Webflow

Thanks!

Arthur

1 Like

Thank you for your answers, reactivity and, more than that, your interest…

So my share link is : https://preview.webflow.com/preview/parallax2?preview=91902a7eadaf87ad0bb5a3d3fce73263
My published page is : http://parallax2.webflow.io/
And my custom code is

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script>
    $(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        menu: false,
        lockAnchors: false,
        anchors: ['firstSlide','Hospitalier', 'Projet-Scintigraphie','Reanimation','Coronarographie'],
        navigation: true,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide','Hospitalier', 'Projet-Scintigraphie','Reanimation','Coronarographie'],
        showActiveTooltip: false,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 900,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        resize : false,
        paddingTop: '0',
        paddingBottom: '0',
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,

        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',
        
        

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
        


    });
});
    			    
</script>

<style>
/* Blend modes */
.mbm-normal{mix-blend-mode: normal;}
.mbm-multiply{mix-blend-mode: multiply;}
.mbm-screen{mix-blend-mode: screen;}
.mbm-overlay{mix-blend-mode: overlay;}
.mbm-darken{mix-blend-mode: darken;}
.mbm-lighten{mix-blend-mode: lighten;}
.mbm-color-dodge{mix-blend-mode: color-dodge}
.mbm-color-burn{mix-blend-mode: color-burn;}
.mbm-hard-light{mix-blend-mode: hard-light;}
.mbm-soft-light{mix-blend-mode: soft-light;}
.mbm-difference{mix-blend-mode: difference;}
.mbm-exclusion{mix-blend-mode: exclusion;}
.mbm-hue{mix-blend-mode: hue;}
.mbm-saturation{mix-blend-mode: saturation;}
.mbm-color{mix-blend-mode: color;}
.mbm-luminosity{mix-blend-mode: luminosity;}
</style>

<script>
$('a').click(function(e) {
    var anchor = $(this), h;
    h = anchor.attr('href');
    e.preventDefault();
    anchor.animate({'opacity' : 100}, 1500, function() {
        window.location = h;
    });
});
</script>

So the problem comes for example at the left navigation bar where the 4 first navlinks have to change color when each section comes to be shown
Thank you again.

NB : I’m sorry for my poor work and the mess in the web site organisation… I’m not basely an IT guy or web designer… So thank you again for ur help.

function isInView(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

$(document).ready(function() {
  $(window).scroll(function() {
    // page 1
    if(isInView('#page-1')) {
      $('#nav-to-page-1').addClass('active');
    } else {
      $('#nav-to-page-1').removeClass('active');
    }

    // page 2
    if(isInView('#page-2')) {
      $('#nav-to-page-2').addClass('active');
    } else {
      $('#nav-to-page-2').removeClass('active');
    }
  });
});

Thank you @bartekkustra.

I’m little bit ashamed to ask this question, but how could i add it?
like this is fine?

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script>
    $(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        menu: false,
        lockAnchors: false,
        anchors: ['firstSlide','Hospitalier', 'Projet-Scintigraphie','Reanimation','Coronarographie'],
        navigation: true,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide','Hospitalier', 'Projet-Scintigraphie','Reanimation','Coronarographie'],
        showActiveTooltip: false,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 900,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        controlArrowColor: '#0000FF',
        sectionsColor : [],
        resize : false,
        paddingTop: '0',
        paddingBottom: '0',
        fixedElements: '#header, .footer',
        responsive: 0, //backwards compabitility with responsiveWiddth
        responsiveWidth: 0,
        responsiveHeight: 0,
        
        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',
        
        

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
        


    });
    
    function isInView(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

$(document).ready(function() {
  $(window).scroll(function() {
    // page 1
    if(isInView('#page-1')) {
      $('#nav-to-page-1').addClass('active');
    } else {
      $('#nav-to-page-1').removeClass('active');
    }

    // page 2
    if(isInView('#page-2')) {
      $('#nav-to-page-2').addClass('active');
    } else {
      $('#nav-to-page-2').removeClass('active');
    }
  });
});
});
    			    
</script>

If I did well, unfortunately, it doesn’t work.

Try this one: <script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage. - Pastebin.com

Also make sure to set up your #page-1 and #nav-to-page1 in custom code as this is just a template you should use :)

Again thank you @bartekkustra.
I think i did what you adviced me to do and still not working

here is my custom code

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script>
$(document).ready(function() {
    function isInView(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while(el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;
      left += el.offsetLeft;
    }

    return (
      top < (window.pageYOffset + window.innerHeight) &&
      left < (window.pageXOffset + window.innerWidth) &&
      (top + height) > window.pageYOffset &&
      (left + width) > window.pageXOffset
    );
    }
  
    $(window).scroll(function() {

      // page 1
      if(isInView('#Coronarographie')) {
        $('#BoutonCoro').addClass('active');
      } else {
        $('#BoutonCoro').removeClass('active');
      }

      // page 2
      if(isInView('#Reanimation')) {
        $('#BoutonRea').addClass('active');
      } else {
        $('#BoutonRea').removeClass('active');
      }

      // page 3 ...
    });
    
    $('#fullpage').fullpage({
        //Navigation
        menu: false,
        lockAnchors: false,
        anchors: ['firstSlide','Hospitalier', 'Scintigraphie','Reanimation','Coronarographie'],
        navigation: true,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide','Hospitalier', 'Scintigraphie','Reanimation','Coronarographie'],
        showActiveTooltip: false,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 900,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        controlArrowColor: '#0000FF',
        sectionsColor : [],
        resize : false,
        paddingTop: '0',
        paddingBottom: '0',
        fixedElements: '#header, .footer',
        responsive: 0, //backwards compabitility with responsiveWiddth
        responsiveWidth: 0,
        responsiveHeight: 0,
        
        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',
        
        

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
        


    });

});
              
</script>

<style>
/* Blend modes */
.mbm-normal{mix-blend-mode: normal;}
.mbm-multiply{mix-blend-mode: multiply;}
.mbm-screen{mix-blend-mode: screen;}
.mbm-overlay{mix-blend-mode: overlay;}
.mbm-darken{mix-blend-mode: darken;}
.mbm-lighten{mix-blend-mode: lighten;}
.mbm-color-dodge{mix-blend-mode: color-dodge}
.mbm-color-burn{mix-blend-mode: color-burn;}
.mbm-hard-light{mix-blend-mode: hard-light;}
.mbm-soft-light{mix-blend-mode: soft-light;}
.mbm-difference{mix-blend-mode: difference;}
.mbm-exclusion{mix-blend-mode: exclusion;}
.mbm-hue{mix-blend-mode: hue;}
.mbm-saturation{mix-blend-mode: saturation;}
.mbm-color{mix-blend-mode: color;}
.mbm-luminosity{mix-blend-mode: luminosity;}
</style>

<script>
$('a').click(function(e) {
    var anchor = $(this), h;
    h = anchor.attr('href');
    e.preventDefault();
    anchor.animate({'opacity' : 100}, 1500, function() {
        window.location = h;
    });
});
</script>

So i think it’s what it have to look like. knowing that, for example, “Coronarographie” is in ID for the section and “BoutonCoro” is the ID of the button that have to be colored.
If you would and could have a look, my share link is : https://preview.webflow.com/preview/parallax2?preview=91902a7eadaf87ad0bb5a3d3fce732632 . My published page is : http://parallax2.webflow.io/2

Thank you very much for your patience.

… And about this issue, your solution will fix the nav problem, but i think that the problem is more general. I mean, all the animations in general with the function “onscroll” will not work… There is no solution for the hole problem?

Any Help, please?
Do you think that there is no solution and that i have to leave one of the 2 plugins?
Thank you for your patience.

Hello again @slimbl

I am sorry, looks like it is general conflict between these 2 plugins. :disappointed: Unfortunately, not all plugins can be compatible with each other.

You will have to leave only one of them.

I am sorry.

Regards,
Anna

Ok, but anyone knows about one plugin or custom code that could make the hole page scroll in one time?
I found this one for example : GitHub - peachananr/onepage-scroll: Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
but I’m not sure that we could add it, and if we do so, it will work…
I would like to keep working on webflow… so if someone saw any way to make the scroll about the hole page, it would be great to inform me about it.
Thank you,
Best regards

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.