Streaming live at 10am (PST)

Need help in JAVASCRIPT: Scrolling Interactions with Fullpage.js

So, every section fades in when you scroll to it? Here, the first and second sections fade in on page load and the third doesn’t fade in at all. I tried it in Safari, Chrome and Firefox. Nothing.

well - in looking at it again…

it appears - the PUBLISHED site… the paragraphs do not fade in the way you want.

and the text in the 3rd section does not appear at all

see video:

in your project… I changed the 2nd section to yellow - to see it better - and also changed the paragraph text.

I also think you have an issue with the interactions. You have 1 interaction for all the sections - and it controls all the paragraphs.

So if you scroll into a section - all the paragraphs - in all section “fade-in”.

I changed fade-in to move to origin. On init and scroll-out I added move left 200.

I will have build my own project using fullpage to determine more.

but I cannot publish your site - that’s why I have to build my own

  • and I have 6 sites under development right now (February) with 10 more due in March.

I’m not sure if I can take the time to build a test site for you.

I think the problem is in the way you are calling your interactions.

And all your paragraphs are class the same name.

So all paragraphs are affected the same way.

Can you clone the project ? That way I can just add it into my library / dashboard and work from there.

Otherwise. like I said… time is very limited.

Cloning and transferring projects is not possible in the personal plan, only in the professional plan. And i am on the personal plan. So that’s not possible for me. Sorry.

What’s wrong with having the same class for different paragraphs? And what’s wrong with having one interaction for more than one paragraph? I think now we are diskussing general designing guidelines but not the problem I have.

What I think is the main problem… There must be some javascript functions in the fullpage.js with identical names or variables used by webflow and they kind of interfer with each other, limiting the interactions to work properly. I just don’t know how to find and rename them so that everything works again.

It doesn’t matter if you can clone or not.

I just confirmed your issue.

I created my own version - on my server - and got the exact same response you did.

I will go through the js and try to figure out what’s going on.

I’m betting there’s a conflict.

As for the naming… it just would made it easier for me to understand what you were talking about. No big deal… like I said - the issue is confirmed - at least on my end.

Also… if you add additional sections… ie: section 4… section 5…

the additional sections will respond like section 3.

which means… anything above section 2 will not display any text.

and all section will not have perform any interactions.

see here:

It’s opacity… that appears to be causing the problem.

check these demo’s - they are almost exactly alike

First demo fades text… 2nd demo changes position of text instead of fading.

Demo 1

Demo 2

Hey. Thanks again for your time! I’m glad somebody helps. But I don’t think the problem has anything to do with the interaction itself and how it is animated in between. I mean it’s irrelevant if you animate the movement or opacity or anything else… The interaction simply doesnt get triggered and gets stuck in it’s “initial appearance” state! And that is because of a conflict between webflow and fullpage.js! So we have to look inside these two. I am just not very good in javascript. That’s why I need help! =)

I think we are saying the same thing.

I’m not saying “it’s opacity that’s creating the issue”.

I’m saying “look at opacity”… because that’s a case where I can provide an issue.

When you remove opacity… and instead add a different interaction - like “move”… which is what I did…
the issue changes a little.

So something that Webflow is doing (or not doing… or doing incorrectly - or fullpage is is doing… etc… you get the point) is conflicting with fullpage.

When you remove opacity as an interaction… FullPage become more usable.

Took a while for me to get to understand what you were talking about… but I eventually got there.

Anyone else who can help? I really can’t do this by myself… =)

it’s not currently fixable - if you need to use the opacity interaction.

I have it working with “move” - but not opacity.

See here: Fullpage.js scroll effect

No, you really don’t have it working with a move interaction. You really don’t. Do you even read my posts? As in my example, only the interaction on the first section gets triggered. The others don’t. The paragraphs simply stay in their inital appearance state.

And of course the problem is fixable. Maybe you don’t have the skills to fix it, maybe I don’t. But it surely is. So, is there maybe anyone else who can help out? Maybe someone with skills in javascript.

@buntestrahlen - Jaro… I’m a pretty easy going…

  • but you pretty much just crossed the disrespectful line there.

You say you are from Germany

  • I lived in Frankfurt for 5 years and travelled substantially throughout Europe.

i assume you mean… you have to translate your words from German to English.

I have to translate from Vietnamese to to English

  • English is my fourth language and not my native tongue.

So perhaps… you didn’t intend to be rude. But I believe you were.

And perhaps… I tried to help. I don’t really remember seeing anyone else trying to help.

Maybe someone will try help you after this.

I didn’t say the Move interaction “fixed the problem”. I said the Move interaction changed the issue.

Some of what is say is not just for you (Jaro). Some is to help Webflow find / identify the problem.

If you use Move interaction then resize the window larger to smaller… the interaction will work.

This probably means the FullPage code changes the screen resize and doesn’t properly notify the system - or Webflow does not interpret the notification properly - unless the window resize is triggered.

Perhaps, this is beyond your capacity to understand.

And… Yes. I did read your posts.

I didn’t get paid. I didn’t ask for money. I didn’t ask for a thank you.

I simply tried to help and I spent several hours of my time helping a total stranger

  • who appears very frustrated and seems like an angry person inside.

Your time line is not my issue.

I tried to help you… because I think people should help each other.

As for my skills…

  • perhaps you should review my profile.

Perhaps my help for you… not so much anymore.


I really did not intend to be rude. I am sorry if it sounded like that. I just wanted to point out that what you were saying in your last posts is wrong. Because you did not get it working with a move interaction. You got stuck at the exact same point where I did. And this is that the interactions don’t get triggered. When I say you were wrong that doesn’t mean I am disrespectful or I don’t like you. I appreciate the time you spent to help me. I really do. I was simply pointing out facts.

Hey revolution,

thank you for your time here. Your answers helped me a lot!

Can’t this stuff be done natively in WF. I think it can be done. Anything special about this fullpage.js thing?

You’ll find the answer in fullPage.js FAQs:

jQuery scroll event doesn’t work

Same answer as Parallax doesn’t work with fullpage.js

Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.

Parallax doesn’t work with fullpage.js.

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don’t want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn’t actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

If you just want your text to fadeIn or out, I would use the CSS class added to the body on page change. But feel free to use the callbacks as well combined with javascript or jQuery to create your effects.

I got this answer in another forum. It helped me a lot. This is exactly what I wanted to point out and didn’t know how to explain…


1 Like

How do you want to achieve this? Of course, the sections in full browser height and the navigation could be done natively in webflow. I did this by myself already. But I would really be interested in how you want to stop the normal page scrolling and make it scroll to the next or previous section automatically using the mousewheel or trackpad.

Hmm. Ok I see why you want to us the plugin. Best of luck.

Hey, I have got fullpage.js working on my site but the only thing I am unable to find a way to do is add the navigation dots which I can see from some of the demos you guys have posted have them in. Any help with how to add the dots would be much appreciated :slight_smile: