Streaming live at 10am (PST)

How to connect smooth scrolling to Fullpage.js


#1

Hi

Adding lines
easing: ‘easeInOutCubic’,
easingcss3: ‘ease’,

All code:

  <script>
    $(document).ready(function() {
      $('#fullpage').fullpage();
    });
  </script>
  <script>
    $(document)
      .ready(function() {
        $('#fullpage')
          .fullpage({
            anchors: ['slide1', 'slide2', 'slide3', 'slide4', 'slide5'],
            menu: '#menu',
            responsiveWidth: 720,
            scrollingSpeed: 1250,
            scrollBar: false,
            animateAnchor: true,
            touchSensitivity: 5,
            normalScrollElementTouchThreshold: 5,
            easing: 'easeInOutCubic',
            easingcss3: 'ease',

          });
      });
  </script>

And the slider breaks. Sections cannot be scrolled. What am I doing wrong?


#2

You need to set ‘Scrollbar’ to TRUE. Webflow relies on this to perform interactions. If you want to hide the scrollbar, you can make it transparent, alter the width, etc. with CSS (don’t use display: none).


#3

Hey, @Cjh
I did, but it’s not the smoothness that I need. Can I add InOutExpo smoothness?

Returning to your answer regarding the slider. I do not understand how the subsequent slide animation is going on? After all, each section has an animation of ScrollintView, and in this animation you do not create an interaction for the next slide. I do not understand.


#4

@Cjh That is, you create an animation scrollintoview only for the first slide. But the second slide is also animated in the preview. How?


#5

Some stuff may not be completely intuitive so I would literally copy it step by step to fully understand how it works. I think I may have used the second slide entrance as a trigger for slide 1 exit animation…but honestly, I’m not sure off the top of my head. If it’s easier, I can temporarily set the project to cloneable and you can duplicate it but I would still highly recommend reviewing all the inner-workings.


#6

There are no elements of the first section in the animation of the second section. It’s really surprising. I don’t understand how section animations are built. I recently copied your work step by step. Even two times. Unfortunately, I faced the same error as now. I will try to understand the structure of your work better, but today I think it is impossible, because the second section was outside the field of view of the first section, and there is no animation of the second section. How did you do it… I really am in a huge surprise. In any case, thank you for your help, thank you for giving the right direction towards fullpage and showed the implemented project. It looks very cool!


#7

Hmmm, did you alter any of the percentages for each interaction to take effect? That can cause problems if so…

Everything is done 100% in webflow so it should all be there…I would also copy the exact custom code I have in the page footer section.

It is possible that something is not being reflected in the UI after cloning it due to a bug, but that’s the only other thing I can think of.


#8

@Cjh Yeah,I copied it exactly. Every percentage, every pixel and the like. I used the code you left in the footer. I must have made a mistake. I’ll recheck. At least for the sake of understanding the way you created the subsequent (sections) animations . It’s very interesting, really


#9

I just noticed you’re using 5 slides instead of 4. This also could be a source of issues as the first and last slides require unique interactions as I recall.

Also, I’d use the easing from my footer (if it’s even specified). This is because the advanced animation effect has nothing to do with fullpage.js except for the speed. It is really just the fullpage.js speed combined with the slide out panels easing.


#10

Thanks. I’ll try copying again. If this attempt fails, I will start improvising in the creation of this slider. Thanks again!