“scrollBar:true” impacts performance/FPS • fixed/sticky elements inside “fullpage” wrapper

[GeorgyDesign]

Hi guys!

I’m using Webflow and creating a website for a client with FullPage.js.

I just wanted to ask why “scrollBar: true” impacts performance so much? FPS drops quite substantially. I’ve checked other websites with “scrollBar: true” like the demo one by Alvaro and another one that I’ll mention below.

That being said, the website is so smooth without “scrollBar: true”.

Is there a fix for the performance issues? Sadly, “position: fixed” doesn’t work inside “fullpage” wrapper without “scrollBar: true”. I needed it to create an animation.

Basically, I want the same “sticky” effect as in the “second” section of this website (made in Webflow too). I’m really scratching my head here trying to understand how to create it :(

[alvarotrigo]

Is there a fix for the performance issues? Sadly, “position: fixed” doesn’t work inside “fullpage” wrapper without “scrollBar: true”. I needed it to create an animation.

Can you try version 4 in development to see if you see any notable change? Use these 2 files instead: https://rawgit.com/alvarotrigo/fullPage.js/dev/dist/fullpage.min.js https://rawgit.com/alvarotrigo/fullPage.js/dev/dist/fullpage.min.css

[alvarotrigo]

Basically, I want the same “sticky” effect as in the “second” section of this website (made in Webflow too). I’m really scratching my head here trying to understand how to create it :(

Is this the website you say that has bad performance issues? They are also using scrollBar:true.

[alvarotrigo]

Updated the links:

For v4, try replacing your files for these: https://rawgit.com/alvarotrigo/fullPage.js/dev/dist/fullpage.min.js https://rawgit.com/alvarotrigo/fullPage.js/dev/dist/fullpage.min.css

[GeorgyDesign]

Basically, I want the same “sticky” effect as in the “second” section of this website (made in Webflow too). I’m really scratching my head here trying to understand how to create it :(

Is this the website you say that has bad performance issues? They are also using scrollBar:true.

Yes, the website uses scrollBar: true

I would really appreciate your thoughts on recreating that animation in Webflow. As far I can see, the dev created a fixed wrapper with animation that adds and removes 100vh, hence the necessity to use scrollBar: true.

Is there a fix for the performance issues? Sadly, “position: fixed” doesn’t work inside “fullpage” wrapper without “scrollBar: true”. I needed it to create an animation.

Can you try version 4 in development to see if you see any notable change? Use these 2 files instead: https://rawgit.com/alvarotrigo/fullPage.js/dev/dist/fullpage.min.js https://rawgit.com/alvarotrigo/fullPage.js/dev/dist/fullpage.min.css

Sure, gonna try it out. I’ll let you know if the performance will be better.

[alvarotrigo]

Yes, the website uses scrollBar: true

Are you able to experiment any drop in FPS on the demo page? I can't see any drops using Chrome.

Any updates on the results using fullPage.js version 4?

[GeorgyDesign]

Any updates on the results using fullPage.js version 4?

Hey Alvaro 👋🏻

I did use your new version of FullPage: sadly, it doesn’t work for some reason. I literally changed only URLs, but it didn’t work out. I’ve checked Chrome Dev Tools, and it said that scrollOverflow: true might be an issue, so I removed it completely, but still the same thing.

Here are two links with(out) new FullPage.js version:

Old: https://aaply.webflow.io/home-test New: https://aaply.webflow.io/home-test-copy-2

Are you able to experiment any drop in FPS on the demo page? I can't see any drops using Chrome.

I did check https://alvarotrigo.com/fullPage/examples/scrollBar.html — I have FPS issues here too. I want to clarify: FPS issue is only related to mouse wheel scroll, though if I try to use the scrollbar, then the website is smooth as a butter. The same goes for your website and mine.

[alvarotrigo]

@GeorgyBuns thanks for that. Can you replace your fullpage.min.css and fullpage.min.js file with the latest ones on the dev branch? I've just pushed some changes:

https://github.com/alvarotrigo/fullPage.js/tree/dev/dist

[alvarotrigo]

Also, what kind of drop are you experimenting? I can't see any issue with the FPS on your demo page. https://aaply.webflow.io/home-test

These are the results:

[GeorgyDesign]

@GeorgyBuns thanks for that. Can you replace your fullpage.min.css and fullpage.min.js file with the latest ones on the dev branch? I've just pushed some changes:

https://github.com/alvarotrigo/fullPage.js/tree/dev/dist

Hey Alvaro!

I’ve tried that, but scrollBar: true still doesn’t work. Not only that, but when it’s enabled there is no scroll bar (I mean it’s still there, no scroll thingy) and it’s impossible to scroll.

You can see the code on the website yourself — it’s still there.

Link to the page with updated code → https://aaply.webflow.io/home-test-copy-2

Also, what kind of drop are you experimenting? I can't see any issue with the FPS on your demo page. https://aaply.webflow.io/home-test

These are the results:

Try to open this link again, I’ve enabled scrollBar: true.

[alvarotrigo]

There's an element between sections that makes the markup invalid for fullpage.js usage:

There can not be any elements between sections at the moment. Remove it and you should be able to scroll down.

Try to open this link again, I’ve enabled scrollBar: true.

I can't see any drops still.

[GeorgyDesign]

Hey Alvaro, sorry for replying for so long — I’ve been relocating to another country due to the relatively recent events in Ukraine.

There's an element between sections that makes the markup invalid for fullpage.js usage:

There can not be any elements between sections at the moment. Remove it and you should be able to scroll down.

I’ve removed these elements, but scrollBar: true still doesn’t work with updated FullPage.js → proof link. Actually, these elements didn’t interfere with scrollBar: true and overall work of the plugin with the previous version of FullPage.js (it’s on another page).

Try to open this link again, I’ve enabled scrollBar: true.

I can't see any drops still.

I recorded a Loom explaining the FPS issues, scrollBar: true thing, the difference between updated and previous version of FullPage.js, and showed that position: sticky inside a scrollable section doesn’t work in a previous version.

EDIT: Just noticed that there is no sound from my microphone in a Loom — I will record another one.

It would be amazing if we could hop on a call and find out the issues.

TL;DR: Anyway, the updated version seems to be working, but I cannot enable scrollBar: true (I need it for Webflow Interactions to work properly (as far as I remember, haha), though position: sticky does work in scrollable sections.

[alvarotrigo]

scrollbar: true seems to be working fine https://codepen.io/alvarotrigo/pen/zYRGXjE

Try to reproduce the issue in the codepen so we can isolate it from the rest of your code.

[GeorgyDesign]

scrollbar: true seems to be working fine https://codepen.io/alvarotrigo/pen/zYRGXjE

Try to reproduce the issue in the codepen so we can isolate it from the rest of your code.

I opened the CodePen and… FPS issue is the same here too. I’ve removed scrollBar: true and the scroll became smoother. I did open the link in incognito mode, and the issue is the same. Furthermore, I’ve tried to open the link in Firefox (I use Google Chrome), specifically Tor Browser — it’s the same there too.

[alvarotrigo]

Can you confirm fullpage scrolls as expected in the codepen so we can discard any functionality issues?

Performance wise I can't test it right now but I'll do later. Although I expect no issues from my side.

[GeorgyDesign]

Can you confirm fullpage scrolls as expected in the codepen so we can discard any functionality issues?

Performance wise I can't test it right now but I'll do later. Although I expect no issues from my side.

Yes, FullPage scrolls as intended — the issue is all about performance. I’m gonna test it on a Macbook later to confirm that the issue persists not only on my device.

[alvarotrigo]

Nothing changed on my side.

Both the codepen and the example page give me normal FPS:

[alvarotrigo]

Were you able to reproduce your issue in other computers? Any FPS or performance tab issue you can post as a reference?

[GeorgyDesign]

Were you able to reproduce your issue in other computers? Any FPS or performance tab issue you can post as a reference?

Yes, the issue is the same on MacBook Air. Not sure what reference are you talking about.

I guess the issue might be a visual one rather than performance related, hence you didn’t see the difference by using dev tools.

[alvarotrigo]

Yes, the issue is the same on MacBook Air. Not sure what reference are you talking about.

Any picture of your FPS counter?

[GeorgyDesign]

Also, Alvaro, is there a way to create sticky elements in FullPage.js? I’ve googled this for quite some time, but didn’t find a solution.

The only thing I found out is to use fixed, but it doesn’t work in a layout I’m using since it’s quite complicated to do. For example, you can see two frames that I wanted to be one section (or something like that), but to switch its content on scroll:

Another important question is how to use “Out of view” interaction in Webflow with FullPage.js? “In view” is understandable, but “Out of view” triggers when we are going, well, out of view of a section. Basically, I want to trigger an animation when a user scrolls down — there will be a timer before the section switch, so I want to have an animation at that time. Like elements disappearing or something.

Thank you a lot for the replies in advance! I really want to use FullPage.js in the project.

[alvarotrigo]

Also, Alvaro, is there a way to create sticky elements in FullPage.js? I’ve googled this for quite some time, but didn’t find a solution.

I haven't tried, but using scrollBar:true should do the trick.

Another important question is how to use “Out of view” interaction in Webflow with FullPage.js? “In view” is understandable, but “Out of view” triggers when we are going, well, out of view of a section. Basically, I want to trigger an animation when a user scrolls down — there will be a timer before the section switch, so I want to have an animation at that time. Like elements disappearing or something.

Using scrollBar: true should allow you to use any Webflow features regarding scrolling.

Otherwise, I recommend making use of fullPage.js callbacks for those things. See a demo here: https://github.com/alvarotrigo/fullPage.js/blob/master/examples/callbacks.html

[GeorgyDesign]

Yes, the issue is the same on MacBook Air. Not sure what reference are you talking about.

Any picture of your FPS counter?

No, it was visible to my eye. I guess it is a visual issue rather than a ordinance l performance one. I can record a Loom so you can see it if you want.

[GeorgyDesign]

Also, Alvaro, is there a way to create sticky elements in FullPage.js? I’ve googled this for quite some time, but didn’t find a solution.

I haven't tried, but using scrollBar:true should do the trick.

I guess it can help, but I do not how to do it properly. I mean you said that there cannot be any elements between sections and I cannot place two sections in one div too. I’m running out of ideas here, damn :(

Another important question is how to use “Out of view” interaction in Webflow with FullPage.js? “In view” is understandable, but “Out of view” triggers when we are going, well, out of view of a section. Basically, I want to trigger an animation when a user scrolls down — there will be a timer before the section switch, so I want to have an animation at that time. Like elements disappearing or something.

Using scrollBar: true should allow you to use any Webflow features regarding scrolling.

Otherwise, I recommend making use of fullPage.js callbacks for those things. See a demo here: https://github.com/alvarotrigo/fullPage.js/blob/master/examples/callbacks.html

Callbacks might be a solution, but as far as I know it is impossible to use them to call Webflow Interactions :(

[alvarotrigo]

I guess it can help, but I do not how to do it properly. I mean you said that there cannot be any elements between sections and I cannot place two sections in one div too. I’m running out of ideas here, damn :(

You can probably get better answers for that on Webflow forums. That's more of a general coding issue than a fullPage.js specific one.

Callbacks might be a solution, but as far as I know it is impossible to use them to call Webflow Interactions :(

No idea how Webflow interactions works. Probably webflow forums can help you there too.

[GeorgyDesign]

No idea how Webflow interactions works. Probably webflow forums can help you there too.

Gonna try looking for the info there.

You can probably get better answers for that on Webflow forums. That's more of a general coding issue than a fullPage.js specific one.

This is FullPage.js related issue because I’m limited in terms of a website structure due to how FullPage.js works. I’m still trying to figure out how to make sticky elements in FullPage.js. For example, how to create elements sticky after third section? What about certain div is being sticky between a few sections?

Yes, the issue is the same on MacBook Air. Not sure what reference are you talking about.

Any picture of your FPS counter?

No, it was visible to my eye. I guess it is a visual issue rather than a ordinance l performance one. I can record a Loom so you can see it if you want.

Gonna record Loom later.

[alvarotrigo]

For example, how to create elements sticky after third section? What about certain div is being sticky between a few sections?

I haven't tried myself :) But you might have to use the trick explained here where you dynamically make the element "fixed".

[GeorgyDesign]

Hey Alvaro!

Another question: I’ve used scrollBar: true to use “Scroll into View” interactions in Webflow since you recommend this yourself. Though, for some reason, “Scroll into View” interactions work incorrectly — the second section should have an animation, but it doesn’t happen when you scroll into this section, but only when scrolling to the third one or go back to the first section.

You can check it yourself → https://aaply.webflow.io/for-alvaro/fullpage-previous-version

Here is the code:

Here is the structure:

I did try to change the offset, remove non-section elements in “fullpage” div (they do not affect anything), etc — no help. Changing offset to 0 loads the animation when viewing the first section.

As for other stuff: I’m gonna keep you updated — I’ve spent all day (literally, except breaks) and still trying to make the website work as intended.

One more thing (quite important): transition-delay doesn’t work with scrollBar: true — how to make it work? Why is it disabled in a first place?

Code:

[alvarotrigo]

the second section should have an animation, but it doesn’t happen when you scroll into this section, but only when scrolling to the third one or go back to the first section.

Try using the option fitToSection: false. Let me know if that works for you.

One more thing (quite important): transition-delay doesn’t work with scrollBar: true — how to make it work? Why is it disabled in a first place?

When scroll bar is enabled the animation is done using the JS scrollTo method, which is not something you can transition with CSS, and therefore you can not delay its application.

[alvarotrigo]

For the delay, see my answer here: https://stackoverflow.com/a/36182162/1081396

[GeorgyDesign]

the second section should have an animation, but it doesn’t happen when you scroll into this section, but only when scrolling to the third one or go back to the first section.

Try using the option fitToSection: false. Let me know if that works for you.

Thanks, it worked! Can you explain why it didn’t work? Just curious, not necessary!

One more thing (quite important): transition-delay doesn’t work with scrollBar: true — how to make it work? Why is it disabled in a first place?

When scroll bar is enabled the animation is done using the JS scrollTo method, which is not something you can transition with CSS, and therefore you can not delay its application.

For the delay, see my answer here: https://stackoverflow.com/a/36182162/1081396

I saw that one, but it was complicated to add in the beginning, so I used transition-delay. However, yesterday, I decided to give it a try and played around with the jsFiddle you provided — the thing is, it does work, but only for one section.

What I need is to create separate animations for each section on scroll up and scroll down, it would be ideal if I could customize specific time delays for each one of them too! Sorry, my JS knowledge is quite limited right now because I’m in early steps of learning it. Is it possible to achieve what I want with the code you provided? If so, then, wow, great! — can I use click instead of addClass? Reason is I want to use Webflow interactions and I do not think it is easy to call IX2 in JS, hence I just want to bind an interaction on a, let’s say, button, and onLeave will cause a click on a button.

Thank you a lot, Alvaro, for the help — this is quite a complicated project for me and I hope it will turn out as a great one. I would be proud to showcase it in FullPage.js Showcase page.

[alvarotrigo]

Thanks, it worked! Can you explain why it didn’t work? Just curious, not necessary!

fullPage.js now uses the CSS scroll snaps property to fit sections that are not fully fitting the viewport. (When clicking and dragging the scrollbar for example, or when using autoScrolling: false).

The CSS scroll snaps property is applied to the body element and not the window. Therefore you won't be able to listen to scroll events on the body which is usually what third-party tools do.

I'll see if there's a way we can fix this by perhaps triggering such an event directly from fullPage.js when the body scrolls.

I decided to give it a try and played around with the jsFiddle you provided — the thing is, it does work, but only for one section.

Yeah you would have to modify the JS code in the callbacks to adapt it to your needs. The example only adds delay on the first section.

Sorry, my JS knowledge is quite limited right now because I’m in early steps of learning it. Is it possible to achieve what I want with the code you provided?

I'd recommend you to ask in other places like stackoverflow.com where they'll be able to help you with JS questions. The kind of answer you look for is not the kind of support we provide here as that's way beyond the scope of fullPage.js.

Many things can be achieved with fullPage.js, but it will require you some JS knowledge to accomplish certain things. A knowledge that is not specific to fullPage.js but to JS itself.

If want to get our consulting services, contact us through the ccontact form and we'll provide you a quote per hour.

[GeorgyDesign]

Hi @alvarotrigo 👋🏻

Solved a bunch of issues — a friend of mine helped me with the custom code, so animations work as intended. Though, I’ve spent a bit of time to understand how to structure animations. In addition, cannot say much about site’s performance — will let you know later.

That being said, for some reason, 3 sections disappearing from live site. Not sure what causes it — might be FullPage.js or something else. I’ve tried testing, but didn’t find a reason of the issue.

Main page — doesn’t have those 3 sections; Old page — does have them.

I’ll appreciate help if the issue caused by FullPage.js.

Thanks for the help in advance!

P.S: The 3 sections are above section is--transition-lottie.

[alvarotrigo]

Try to reproduce the issue isolated from your code in jsfiddle or codepen and that'd be easier to debug.

[GeorgyDesign]

Can I upload the whole website to JSfiddle or Codepen?

Sorry, I didn’t get what you mean.

On Mon, May 30, 2022, 21:22 Álvaro @.***> wrote:

Try to reproduce the issue isolated from your code in jsfiddle or codepen and that'd be easier to debug.

— Reply to this email directly, view it on GitHub https://github.com/alvarotrigo/fullPage.js/issues/4344#issuecomment-1141364659, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQHPD3FBIRVTZGMCDK6Q5Z3VMT2ORANCNFSM5SFVWWYQ . You are receiving this because you modified the open/close state.Message ID: @.***>

[alvarotrigo]

Can I upload the whole website to JSfiddle or Codepen?

No, please :) The whole purpose of an isolated reproduction is to isolate your code from the component code because we only cover bugs on fullPage.js and not in your code.

Just try to recreate the problem by abstracting it from your custom CSS/JS code or any third-party libraries. Remove anything that doesn't belong to fullPage.js and try to reproduce your issue with the minium amount of code that is external to fullPage.js.

I wrote a blog post about how to ask questions here: https://alvarotrigo.com/blog/how-not-suck-at-asking-coding-questions/

I hope it helps ;)

[GeorgyDesign]

Thanks for the reply — my apologies for asking a dumb question!

Gonna try your piece of advice ✨

On Tue, May 31, 2022, 14:37 Álvaro @.***> wrote:

Can I upload the whole website to JSfiddle or Codepen?

No, please :) The whole purpose of an isolated reproduction is to isolate your code from the component code because we only cover bugs on fullPage.js and not in your code.

Just try to recreate the problem by abstracting it from your custom CSS/JS code or any third-party libraries. Remove anything that doesn't belong to fullPage.js and try to reproduce your issue with the minium amount of code that is external to fullPage.js.

I wrote a blog post about how to ask questions here: https://alvarotrigo.com/blog/how-not-suck-at-asking-coding-questions/

I hope it helps ;)

— Reply to this email directly, view it on GitHub https://github.com/alvarotrigo/fullPage.js/issues/4344#issuecomment-1141965262, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQHPD3BN4NQ7SSLMLMMG5MDVMXTWHANCNFSM5SFVWWYQ . You are receiving this because you modified the open/close state.Message ID: @.***>

[alvarotrigo]

@GeorgyBuns I guess the issue is now gone away on fullpage.js 4.0.11 as we reverted the way fitToSection worked. Now it works in the same way it did on fullPage.js v3.

[alvarotrigo]

I'll close the issue for now. But if you believe this wasn't solved or you find a way we can reproduce it, let me know.