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

M_A_D_N_I_G_H_T_M_E · June 11, 2019, 1:02pm

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?

Alvaro_Trigo · June 11, 2019, 4:42pm

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.

Alvaro_Trigo · June 11, 2019, 4:53pm

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

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:

And here:

github.com

alvarotrigo/fullPage.js/blob/master/examples/trigger-animations.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Callbacks - fullPage.js</title>
	<meta name="author" content="Alvaro Trigo Lopez" />
	<meta name="description" content="fullPage callback function." />
	<meta name="keywords"  content="fullpage,jquery,demo,callbac,function,event" />
	<meta name="Resource-type" content="Document" />


	<link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />
	<link rel="stylesheet" type="text/css" href="examples.css" />

	<!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->

This file has been truncated. show original

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.

Volander · June 14, 2019, 12:21pm

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

Alvaro_Trigo · June 14, 2019, 3:26pm

@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:

Aleksey · June 14, 2019, 6:19pm

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

Alvaro_Trigo · June 15, 2019, 3:45pm

@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:

Volander · June 20, 2019, 7:48am

It’s working now - perfect, thank you!

marsh · June 21, 2019, 3:16pm

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!

kiwiland · June 25, 2019, 10:04pm

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

Alvaro_Trigo · June 25, 2019, 10:49pm

@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.

kiwiland · June 25, 2019, 11:07pm

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

Resulting site is here:

Alvaro_Trigo · June 25, 2019, 11:13pm

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

kiwiland · June 25, 2019, 11:19pm

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.

Alvaro_Trigo · June 25, 2019, 11:52pm

@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.

kiwiland · June 26, 2019, 12:00am

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

Cheers.

afrohorse · June 27, 2019, 4:10am

@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.

Alvaro_Trigo · June 27, 2019, 10:07am

@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.

mhedinger · November 19, 2020, 7:04pm

The reason animations for slides entering/leaving the viewport dont work, is because fullpage already has its own integrated animation kit. FP will handle your enter/exit animations. You need to make use of that. Here’s another way to do that:

<script>
// write this as your last fullpage option. (Below parameters such as "scrollBar: true")
onLeave: function(index, nextIndex, direction) {
           if(index.index == 0 && direction=='down') {  //index number is the current section
document.getElementById('IdOfElementYouWantToAnimate').classList.remove('.animElem_Out');                 
document.getElementById('IdOfElementYouWantToAnimate').classList.add('.animElem_In');
    // you can create animations by writing them into a class and then adding it to the element
    // to be animated. Don't forget to also remove any previous classes you may have added.

}          else if(index.index == 1 && direction=='down') {
                // make stuff happen in the same way you did above
}
};

// keep whatever else comes after.
<script>

Depending on your needs, remove “nextIndex” and/or “direction” from your “onLeave: function()”.
Instead of “onLeave” you can also make use of “afterLoad” and some other options. You can find more about that in the documentation for Fullpage.js on Alvaro’s Github. I will have you ask google for that.

Cheers everyone.