Fullpage.js Webflow

[Ezilda Newnam]

Iwould love the ability to create full page scrolling websites without having to use an external plugin.

I have had success using fullpage.js but would love an easy to use native solution complete with parallax effects like this example:

The main problem is that Webflow animations are often not triggered because fullpage.js is preventing default scrolling. For example if you use mouse-wheel instead of mouse pad none of the animations will be triggered.

Webflow animatinos are triggered based on the scroll position or the scroll event. Therefore you need to enable the scrollbar in fullPage.js for webflow to fire animations.

You can do that by using the fullpage.js option scrollBar:true

Hey @Alvaro_Trigo I managed to implement Scrollbar functionality and it works perfectly with Webflow scroll into view animations. The only problem is that onLeave function partially stopped working. On this page: -2 the logo should change color in each section. In first section it should be white and in second section it should become dark blue.

Thanks @Siton_Systems, I added the fullpage.js in the custom code section of the project settings, like it says in the step-by-step tutorial. You can see it works in the link: featureforward.webflow.io

Are you sure I put in the right code? It makes the fullpage effect stop working so I suspect something is wrong with the code itself. When I erase this part the fullpage continues to work (the videos stop).

Is there a way to delay the page from scrolling using @Alvaro_Trigo fullpage.js? ideally once the page is scrolled, I need a delay of around 1000ms to let my animations finish and then the page scroll up.

Inside that container we will be adding more div blocks, each of them will be a fullscreen section on our site.

We can add one and copy and paste the others. Each of them will have to use the class section.

fullPage.js creates part of the magic once the page has loaded, such as creating the full-width and full-height sections behind the scenes. But because we are now working with the Webflow editor, we will need to do those same tasks in our editor first so we can see the site as it would look like when applying fullpag.js.

To do so, we will set the properties width and height of our sections to 100%. Additionally, if we want to have centered content, then we can set the display options to flex with a center align and justify layout options.

Luckily for us, fullpage.js makes it easy. It is as simple as adding a new option in our fullpage.js initialization. Fullpage.js provides a few responsive options we can check in the documentation and one of them is responsiveWidth.

I know this has been touched on in the past, specifically with this thread:

But I wondered if anyone can take a look at my page below and offer assistance?

I wanted to use fullpage.js for a single scroll sections website. The single scroll part is working fine, however I note that the navigation using IDs top section will not work!

So using the guidance of this thread I have created my Nav as a list and each link as an

Hi there, I eventually got this working, thanks for your help!! >

Couple of things to note:

1 - You cannot add anchor tags within list items in Webflow, I had to import in as custom code for this bit.

2 - Each anchor tags within the menu has their own unique ID. i.e. #healthy

Am I missing something or should the target section not need this ID also? In order to get this working I used different IDs for each of the sections i.e. #P1, #P2

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?

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

Interactions with page triggers are supported on DevLink components but with a caveat. Because of how page interactions work in Webflow (i.e. they're linked to the specific page the component instance is) DevLink will exports only the first page interaction. So if a component uses multiple page interactions on different pages, only one will be exported.

In order for your components to have access to Webflow's global default styles you'll need to import a css file. In Next.js you can add this to the layout.tsx file so that all pages will have global styles available (or _app.tsx on older version of Next.js).

Note: classes applied on the body are not included in the global.css stylesheet. If you want to apply a default style on the body so that all your components inherit from it (for example a custom font) then we recommend applying it on the "Body (all pages)" tag selector.

By default Webflow components use css modules to prevent component's css classes from colliding with global styles. If you want you can disable css modules and all styles will be defined globally in global.css. You can do that by updating the cssModules flag in .webflowrc.js.

In Webflow, the Grid and Quick Stack elements rely on HTML IDs for certain styles (highlighted with a pink indicator in the Style Panel). However, it's also possible to set a custom ID on those elements. If doing so with CSS modules enabled, the custom ID in the exported DevLink component won't match what's been set in the Designer. That's because the ID needs to be adapted to work with the component CSS module. The resulting ID will have this format: ___ so if you need to target it with custom css styles you'll have to use a wildcard selector like [id*="___"] ... .

Note: If the custom ID that uses ID styles is also bound to a component property, then there would be no simple way to reference the correct ID CSS selector in the exported DevLink component and apply styles correctly. So instead, by design, component properties are not being bound to an element custom ID if such element relies on ID styles. This is a workaround to make sure elements that rely on ID styles are styled correctly, but also a limitation to be aware of. If you need to reference a specific element with custom code we recommend using custom attributes instead.

Slots in Webflow DevLink are meant to provide the user the power of composing components within components. This is a common React.js concept that is used frequently in code bases large and small. You can read more about how slots work in React.js here.

Runtime props can be used to include props that are not covered by Webflow, such as event handlers, or other arbitrary props that, for example, can be provided by third party libraries. By adding a runtime props property to an element, the DevLink compiler will add a new property to your component and spread it in the element it was assigned.

You can export an entire form as a single component and work with it as an uncontrolled React form. You will have access to the same set of functionalities as the standard form of any Webflow published site: Three simple states (Normal, Error, and Success) and simple HTML validations. We recommend this approach for simple forms.

To use forms this way, add a Runtime Prop to the root element of your form component and pass an onSubmit prop containing your handling function. Consider the following example with a Runtime Prop property called formProps:

Instead of exporting the entire form as a single component, you can also split it into several reusable components and have finer control over state, validation, and submission. To achieve such a result, it is necessary to use several of the previously mentioned DevLink features (Runtime Props, Slots, and Visibility Props). This approach is recommended for complex and highly interactive forms.

Certain frameworks like Next.js provide specific components that you can use in your applications like Link and Image. If you want to override DevLink's builtin Link and Image components with your custom ones you can pass them to the DevLinkProvider with the renderLink and renderImage props.

If you have a site with a lot of components you don't need in your React application, you can specify a list of components to sync. Only the components matching your settings will be downloaded when running the sync command. If you have other components from previous syncs they will be deleted (essentially the whole devlink module is overwritten at every sync command).

When something goes wrong and the sync command fails, you will be prompt in the terminal and you'll have the chance to send us a crash report. If you agree to persist your preferences, going forward all crash reports will be sent out automatically without further terminal promps. You can opt-in/out of it by setting the allowTelemetry flag in .webflowrc.js.

By default DevLink exports a global.css stylesheet containing opinionated rules and selectors (such as html and h1). If you need to disable this behavior and only include the bare minimum in order for DevLink components to work, you should activate the skipTagSelectors in you .webflowrc configuration file.

We do not have a specific pedagogical approach to how users use DevLink. We hope to iterate quickly based on user feedback and build functionality that can be most applicable to as many users and workflows as possible.

Define what parts of your components should always be the same and what can be overridden in each instance of the component being used. For example, a heading or button text might need to be dynamic and be overridden in each instance of the component, so you should bind them to a component property.

You can also use runtime props to override specific styles. For example if I add a wrapperProps property to my Hero component and bind it to the div container that wraps the content inside the component, then I can pass a specific backgroundColor to override the existing style.

3a8082e126