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

Design help Animations & Interactions
1

For those of us who enjoy Fullpage.js but are also frustrated by the inability to integrate Fullpage.js slides with webflow interactions.

Allowing webflow interactions to work with the Fullpage.js code there is a need to add callbacks within the custom code section.
I have been trying to do this for months without any success and im sure most if not all of the Fullpage.js users would love to know how this can be done, since it will look rather dull without the use of interactions.

On page load interactions are usually not the problem because they are triggered either when the page starts loading or when it finished loading, but interactions that would trigger after scrolling to another slide or leaving a slide would not work without callbacks.

Im calling all of the knowledgeable people of the Webflow forum to come forward and offer the help so many of us are hoping to get and share a cloneable project that we can work with.

I’ve created a cloneable base Fullpage.js page here that can be copied and used to provide the answer to our callbacks problem.

Here is the header code Ive used for this example:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.fullpage/2.1.8/jquery.fullPage.min.css">

And the body code Ive used for this example:

@Bogette @Siton_Systems @Corinne

2

@samliew @Evgeniy_Kadzin @mrigs @Virginia_Zhu @Waldo @avivtech
@jasondark @crafts_co @NewInBoston @WeCreateStories

5

Hey @Nir

Not exactly sure what you are looking for.

Fullpage.js disables the standard browser scroll function, this means that the “Scroll Into View” interaction is not working. But this code allows “Scroll Into View” to work (maybe change div ID if you are using another name):

<script>
$(document).ready(function() {
	$('#fullpage').fullpage({

		
		scrollBar: true,
		easing: 'easeInOutCubic',
    normalScrollElements: '#scrollable',


	});
});
</script>

You can probably leave “Easing” and “normalScrollElements” out. All you really need is the “scrollBar: true”.

Maybe this helped?

Regards, Tore

2 Likes
6

He trying to create something like this (On each slide start animation):

“The problem” No way to create custom trigger for webflow animations.

Example - when you go to slide-2 start fade animation on “hello world” text block.

This idea is very cool/usefull (Like slides framework example).

7

@Siton_Systems

The code i just uploaded should allow him to do exactly that. He can get that effect by using the “Scroll Into View”-interaction.

1 Like
8

I never try this with scroll into-view. Could be little buggy But worth a try :slight_smile:

@nir can you make a simple test with “scroll into view”?

9

@Siton_Systems

Basically he just want the text to fade-in when he scrolls down, right? Or am i on the wrong track here?

10

Any effect you want (Fade/slide/bla bla) - but the animation should start only when you are inside fullpage-JS slide X (Slide 3 for example).

± like slides framework

11

@Siton_Systems

This is done with the code i wrote up there. Then make an “Scroll Into View” interaction on the element you want to fade-in and remember to change the interaction from “Selected element” to “Class (Only children with this class)”.

Then everything should work. Does this make sense?

2 Likes
12

Sound like great idea. But i hope it will work (Because fullpage js do manipulation for the default scroll of the page = no scrollbar).

I do not have time to check it now.

13

Hi @ToreSBentsen
Thank you for your reply.
Yes, when enabling the scrollbar:true interactions will work, however you lose a bit part of the effect you are trying to achieve with fullpage.js
In addition to that, when you enable the scrollbar:true the smoothness it moves from slide to slide is lost and the whole site feels much “heavier”.

There is a way to make this happen using callbacks

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterLoad: function(origin, destination, direction){
		var loadedSection = this;

		//using index
		if(origin.index == 2){
			alert("Section 3 ended loading");
		}

		//using anchorLink
		if(origin.anchor == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});
14

@Siton_Systems
You got it :slight_smile:
Thats pretty much the way it needs to work
similar to this
or this

15

@Nir

When i added scrollBar: true, i did not feel anything of what you are saying change.
For me it was exactly the same after i added the code i wrote up top. :slight_smile:

16

Here’s a preview with the use of scrollBar:true using the clone provided and same code @ToreSBentsen shared above. FullPage JS still seems to be transitioning the same way as it does without the scrollbar.

Using this in a new homepage we’re designing atm and seems to be the simplest solution for overcoming interactions conflict.

Live Site
Preview Link

2 Likes
17

@marsh

Nice. For me it looks the same. The easing can always be changed, so it has the same scroll feeling as the site @Nir posted.

18

Hi @marsh and @ToreSBentsen
I can understand your view on this, however the solution im trying to create wont include any scrollbar at all, it messes with the design :slight_smile:
There is a code way of doing this with callbacks.

For the moment the scrollbar:true is a workaround that just wont give the same visual effect.

19

Yeah exactly, there’s no easing override, so this one is just using the default set in fullPage JS. The scroll into view interaction potentially needs a bit of work, adding a bit of a delay helps due to the way the sections ease into view quite fast.

20

I believe that with callbacks added to the code the webflow interaction will not be “scroll into view” but rather “on page load”

21

@Nir

It really should not mess with anything. You can easily remove the scrollbar with some CSS, if that is the biggest problem.

22

@Nir

"Page Load " should work too.

1 Like