Streaming live at 10am (PST)

Fullpage.js Lets solve this once and for all together!

Hi. Has someone found how get interactions work with scrollbar:false? Because ScrollOverflow does not work with scrollbar:true. Big fail that if you need normal scroll in big sections (with big content) - scrollbars of main webpage and bigsections scrollbar are conflict. I cant understand why people dont ask this question :\
Has anyone found a solution?

I’m not quite sure what interactions you want to use or how are you planning to fire them, but as long as you use the fullpage.js option scrollBar:true, any interaction fired by the scroll event of the site (not the mousewheel / trackpad event) should work as expected.

1 Like

Has anyone found a solution?

It doesn’t seem to be that Webflow provides any way to trigger interactions/animations by using a CSS class condition (which is quite common when working with CSS/JS).
It can however be done by getting your hands dirty with the fullpage.js component features :slight_smile:

You would need to make use of the CSS state classes added by fullPage.js in the body and section elements or the fullPage.js callbacks.

You can find a tutorial I recorded some time ago on how to use fullPage.js state classes to fire CSS 3 animations here:
https://www.youtube.com/results?search_query=css3+fullpage

And you can find an example of animations using fullpage.js callbacks here:
https://alvarotrigo.com/fullPage/examples/apple.html

And here:

So basically, you will have to rather use custom CSS or custom JS code combined with CSS.
And of course, have some basic knowledge of both technologies: CSS and JS.

I might record another video talking about this if you guys really need one.

I’ve just cloned your project, and it flickers in chrome when scrolling between sections :confused: So does your own example.

@Volander who’s project are you referring to?
It might be because they are using an old version of fullPage.js. Version 2 stop being maintained in 2018 and it contain some bugs, one fo them, when using it combined with scrollBar:true.

I would recommend you to try the latest version.
You can clone the official showcase here:

Tell me how to use the “scrolloverflov” Scrolling inside sections Please!! :slightly_frowning_face:

@Aleksey just use the option scrollOverflow:true in the fullPage.js options.
You can see how to use those options in my video tutorial here:

1 Like

It’s working now - perfect, thank you! :grinning:

Hi @Volander, thanks for sharing. The original project has been updated to use the latest version of fullpage.js now, so this bug is no more!

Hi @marsh and @Alvaro_Trigo

I’m trying to get the above working with the Fade Extension for fullpage which I purchased from @Alvaro_Trigo. It says unlicensed in the project simply because I am doing this testing before applying it to a client site.

@marsh I cloned your project and simply changed it to have the fade extension, but for some reason the animations work on the second slide and none of the others.

Would love help with this.

https://preview.webflow.com/preview/fullpagetest-585cc6?utm_medium=preview_link&utm_source=designer&utm_content=fullpagetest-585cc6&preview=69570e5d99e139487f76cc094a2c2e53&mode=preview

@kiwiland can you show us the result site instead?

Make sure to use the CSS file for fullpage.js version 3, you are currently using the CSS file for fullPage 2.9.7. Which is not compatible with fullpage.js version 3 or the new extension.

You can find the right link in my clonable project.

Also bear in mind fadingEffect can only be used with scrollBar:false, so using scrollBar:true won’t have any effect on it. There won’t be any scrollbar.

Hey Alvaro, I have updated the CSS file but still no luck.

Resulting site is here:

@kiwiland where’s the issue? I see all sections fading as they should.

The fade works but the animations no longer work after the second slide. I want this to work with Webflow animations and that’s why I cloned @marsh project.

@kiwiland you won’t be able to get webflow animations working when you use the fading effect as there’s no scrollbar.
Webflow bases its animations on the scroll event or the scroll position, therefore any site without scrollbar won’t be able to animate that way.

You should get into the code and animate whatever you need to animate by using CSS styles as I detail in this video or by using fullPage.js callbacks, as you can see in this example.

Thanks, I will give that a try. Appreciate your time.

Cheers.

@Alvaro_Trigo I cloned the latest version of your webflow website and since the past two days both your official showcase and my clone has been taking a long time to load and displays at the bottom “waiting for unpkg.com”. I viewed my cloned website today and noticed that sometimes the fullpage.js doesn’t work at all on my page. It’s been working off and on the past two days and I haven’t touched the code at all. I was wondering if this might be something on your end or possibly unpkg.com? Thanks.

@afrohorse sounds like unpkg.com domain had issues to load for you.
You can use any other CDN for fullpage.js such as the ones provided in fullpage.js documentation and the resources section or you can even opt to host it yourself in some domain of yours.

1 Like