February 28, 2019

How to add fullPage JS to your webflow website

Add fullscreen scrolling to your webflow project using fullPage JS

Back to Blogs

How to integrate fullPage JS on a Webflow site

fullPage JS is an awesome library for creating fullscreen scrolling websites. It is fully functional on all modern browsers with touch support for mobile phones and tablets.

Please note: We have no affiliation with fullPage JS and advise you check out the licensing requirements as you may need to purchase a license depending on your intended usage. Full details can be found here.

Step 1:
Copy and paste this CSS code into the head of your page:
Tip: To avoid fullPage JS loading across your entire website, only paste this code into the relevant page setting custom code field.
Adding css to head of page
Step 2:
Add this script before the closing body tag of your page:
Adding code to before the body tag

Step 3:
Add a div and give it an id of fullpage

This will be the parent div wrapping your sections.

Adding fullpage id to page wrapper
Step 4:
Add your sections inside the parent div and give them the class name of section
Adding section class name to sections

That’s it, now click publish and your site should be working with full page scrolling.

Enabling Webflow scroll interactions

If you want to use Webflow scroll interactions, you will need to update the code as fullPageJS by default overrides the standard scrolling experience.

Step 1:
Replace the script we added earlier to the body

Tip: You can test that this worked by publishing and previewing your website. If it’s worked, the scroll bar will be visible again.

Updating code in body tag

Step 2:

Hiding the scrollbar in Chrome

This step is optional and won’t impact scroll interactions, but we think it looks pretty great from a design perspective, so here’s how to hide the scroll bar on Chrome.

Add the following code inside the head tag of your page, making sure you have a class set on your Body element. (You may need to update .body below to match the class name you have given to your Body element).

Note: This will only hide the scroll bar on Chrome for desktop and mobile.
Adding additional styles to hide scrollbar

Now you can start adding your scroll interactions to make all kinds of wonderful and unique website experiences.