Hey!
I am using the Fullpage.js plugin (alvarotrigo.com) on my webflow site. Can somebody explain to me why Scrolling Interactions don’t work anymore when i use the plugin? They seem to interfere with each other but I dont know why and how to fix it…
Thanks in advance!
Jaro
=)
didn’t know this issue existed. post a public link. so we can take a gander.
As you can see, the scroll trigger on the second section does not work.
The linked fullpage.js data can be found here.
To integrate the code… you have to insert into the Custom Code area don’t you ?
Public viewing doesn’t give us access to that part.
Webflow - is there a way to see that ?
Yes, you have. This is the code I added. And of course there is some styling with CSS.
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jaroquastenberg.de/_x/fpjs/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.pagewrap').fullpage({
'verticalCentered': true,
'css3': true,
'navigation': true,
'navigationPosition': 'right',
});
});
</script>
Are you saying it’s not working in Preview Mode ?
It’s working for me in Published Mode.
A lot of JQuery stuff will not work in Preview Mode.
The Script is working fine, as I said. I am only talking about the interaction of the paragraph on the second page. It does not trigger. And of course I am talking about Published Mode.
the 2nd / middle section - interaction… you want to
It’s working… but it’s not linked to the interaction.
See video:
I forgot - remove the interaction on the 2nd paragraph and put it on the 2nd section.
Gotta feed the kids - will check later to see what’s if you got it working.
Hey. Thanks for your answer and the video. But I don’t think you understood me correctly. Everything you did in the video is clear to me and was before. I don’t want the whole middle section to fade in, only the paragraph. I could do this by triggering the paragraph via the section and saying “affect different element(s)”. But even this does not work. The first and second section trigger directly on page load, the third section doesn’t trigger at all… Have a look by yourself.
And of course, all the Interactions work in Webflows Preview Mode. This is because the fullpage.js plugin is not being loaded here. It is only loaded on the published site. And here, none of the scrolling interactions work correctly, as I stated above. Thanks again for your time, but I’m sorry… you didn’t help me at all. Not yet!
Hi @buntestrahlen, ok thanks for your update. Sorry to hear that did not work, we can take a further look at this. Thanks ! Dave
ok… well…
(See video below)
I changed bgcolor of section-2… to make it easier to see.
I set the interaction on the paragraph… instead of the section.
The interaction moves the paragraph left 100… then to origin.
Apparently, I don’t understand the problem… because it works for me every time I check it.
From what I understand (of your needs)… it does exactly what you want.
Guess not.
See Video:
http://quick.as/8WVrfyzO
Did you check the published page? In the videos, you’re always in Preview Mode. As I said, that is where it works all the time. It’s the published page (fullpagescroll.webflow.com) where the problems occur. Please check that one. I don’t know if my english skills are good enough to explain myself better. I am from germany.
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: http://quick.as/yvdpC5Wp
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
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: http://businesswebsites.info/fp/
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.
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.