fullPage.js - Jittery page transitions when using Interactions

Webflow Geniuses!

I’ll start by hoping that @Alvaro_Trigo might have a few minutes to cast his eye over this…

What I am hoping to do is use Interactions triggered by “scroll into view”, while simultaneously using fullPage.js.

Here is my share link: LINK
Here is the live site link: LINK

So, I have followed a mix of instructions. I have used the CSS and js links available in Alvaro’s cloneable template HERE. I have further followed the instructions in this TUTORIAL, from which I took the instruction to use the following code after calling the js script in my page custom code:

scrollBar: true,
normalScrollElements: '#scrollable'  

However, while the Interactions work on the published site, it is extremely jittery (I am using Google Chrome, if that makes a difference). As soon as I take the above code snippet out, my Interactions break but the page scrolling is smooth again. Oddly though, I notice that the Interactions will work once I scroll out of the relevant section and back in again. Very strange.

Any experience or advice would be truly welcomed! Heckling and jeering is equally encouraged.

Thanks!

P.S don’t worry, a license key will be purchased before the site goes live!

I would recommend you to keep the scroll bar and avoid the “hacky solution”.
Just use scrollBar:true.

On the live link I can’t see any issue tho :slight_smile:

Hey Alvaro, thanks for replying so quickly! I read one of your interviews recently, so I know you’re a busy person :slight_smile:

So I’ve just tried that and deleted normalScrollElements: '#scrollable' , however the jittery page transitions continue. It is only slight, however extremely noticeable compared to if I remove both lines that I inserted relating to scrolling - the page transitions are then smooth as silk.

I even tried it on a fresh clone of your fullPage template linked above - I applied an animation to the “Section 2” Header, and published the page both with and without:

scrollBar: true,
normalScrollElements: '#scrollable'  

With the code, it jitters. Without, it transitions smoothly (but breaks the Interaction)

Have you encountered this problem before?

Any link where I can reproduce the issue?
What browser / device are you using?

Hey @Alvaro_Trigo,

Ok so I’ve made this as scientific as possible to try and eliminate random issues that could be causing it.

I have set up two pages, cloned from your fullPage cloneable template, identical in all respects except that one has the two-line code snippet inserted and the section headers animated when scrolled into view.

Here is the “Control” version - this is a clone of your template with nothing changed (on this project’s homepage):

Share Link
Live Link

The version that I have modified with the code snippet is on the page called “Custom Code”, within that project. Here’s the live link to it:

Live Link

If you set up the two live links side by side and scroll through, I’m confident that you will notice a slight “juddering” in the one with the custom code. That is, unless it’s a local error that only affects me (if anyone else reading this can see a difference in the scrolling smoothness, please can you post a comment so I know I’m not going mad?).

And I am seeing this issue on Google Chrome Version 80.0.3987.116 (Official Build) (64-bit), on Windows 10.

A further weird problem is that this fullPage.js template does not seem to work at all on mobile phone (Android, Google Chrome). Even the live link directly from your template page (LINK) does not give any kind of slider effect on mobile - instead it just scrolls freely as any other website would.

Really appreciate your time and help. I’ll be happy to buy you a beer if I’m ever passing through Cambridge - I’m only up the road in Lincoln!

Tested this on a completely different PC with the same issues present, so I’m confident it’s not restricted to just me but is the code going a bit wonky in conjunction with Interactions

Hey @Alvaro_Trigo, just wondered if you might have had a chance to look at this? I’m very keen to purchase a license for fullPage.js but being able to have interactions running alongside is an absolute essential.

I’ve sent these links to several other people who have confirmed they can see the “jittery” scrolling when interactions are present. I’d love to know of any workarounds for your product that you’re aware of.

Many thanks for your time!

If you set up the two live links side by side and scroll through, I’m confident that you will notice a slight “juddering” in the one with the custom code.

scrolBar:true will usually perform worse tthan when using css3 hardware accelerated transitions which is the default behaviour when using scrollBar:false.

That’s because you are using responsiveWidth: 1000,. Just remove that if you are not planning tot use the responsive mode.

I’ve sent these links to several other people who have confirmed they can see the “jittery” scrolling when interactions are present. I’d love to know of any workarounds for your product that you’re aware of.

I don’t know what you mean by “interactions” as i don’t see any animation on the demo page you provided (https://fullpage-js-custom.webflow.io/).

@Alvaro_Trigo thank you for the reply :slight_smile: and the first two points are really helpful, thank you.

On the third point, that’s entirely my fault for explaining poorly - sorry! I actually meant that they can see the jittering when the environment for interactions is present - i.e. on the live link with the code snippet. I have now updated the demo page so that “Section 2” text is animated when it scrolls into view.

So the Webflow animations are dependent on the scrollbar being visible, is that correct? Is there any alternative method to get animations to run when scrolled into view using fullPage.js? Using scrollBar: false enables smooth scrolling again, but the animation applied to “Section 2” text then does not work.

I don’t see any problem in your demo.
But if you want to try other ways, you can make use of fullpage.js callbacks or css state classes to do so.

I created a video long time ago regarding how to use CSS state classes to create CSS based animations:

For JS animations you can see this example:

@Alvaro_Trigo could I trouble you to tell me what browser you’re viewing it on? I have tested this on multiple browsers, on multiple machines, and have had several other people confirm that the page shudders on scroll.

Here’s a Loom video demonstrating. The demo site with the code snippet is on the left, the exact clone of your demo is on the right. When I scroll both nearly simultaneously from left to right, logic suggests that the left hand screen should complete the scroll first (as that is where I started the scrolling action). This is not the case - there is a visible delay and the scroll takes longer, meaning that the window on the right (without scrollBar: true and therefore without the ability to use Webflow Interactions) completes 90% of the scroll first, before the left hand screen seems to “catch up”.

I appreciate the advice on CSS based animations but that’s really not what I’m looking to do - I would like to use Webflow Interactions in conjunction with fullPage.js in order to maintain my workflow.

You can try playing with a lower scrollingSpeed value so it will perform the movement faster. Or even better, with the easing option that is used with JS animations.
You would need to include the easings.js file or its minified version and use any of those functions. You can test them on the jQuery UI page at the very bottom.

The difference you mention is just that one uses scroll bar and the other don’t. One uses the JS function scrollTo and the other uses css3 hardware accelerated animations.

CSS3 animations is usually smoother (used when not using scrollbar) and it uses another easing function. (ease by default as detailed in the the fullpage.js documentation)

If you can, I would recommend you to use callbacks or state classes if you can to fire those animations. It is quit easy with CSS as showed in the video I posted.

@Alvaro_Trigo I really appreciate you taking the time to list the reasons why this might be happening, as well as potential solutions. I’ll be sure to see if I can troubleshoot and fix according to your guidance :slight_smile:

Much appreciated bud!