How do I add fullpage.js to Webflow?

The steps

• Build the structure in the Designer. fullPage.js needs one wrapper (not the body) that holds the sections, and each section needs the class section. Give the wrapper an ID, for example fullpage, in the element settings.
• Add the library. fullPage.js is available from jsDelivr, UNPKG and cdnjs, or through npm. Include its CSS and JavaScript files in Webflow's custom code. Put the stylesheet in the head and the script before the closing body tag, either in page settings (one page) or site settings (every page).
• Initialise it. Below the library script, call new fullpage with the wrapper's selector, for example new fullpage('#fullpage', { licenseKey: 'YOUR_KEY' }). The options available, such as autoScrolling, fitToSection and normalScrollElements, are in the fullPage.js documentation.
• Publish and test. Custom code runs on the published site, not in the Designer canvas, so check the webflow.io staging domain on desktop and a real phone.

The licence

fullPage.js is dual-licensed: GPLv3 for projects that are open source under a compatible licence, and a commercial licence for everything else. Its README calls the licenseKey option compulsory. A client's business website is normally not GPL, so budget for a commercial licence and read the terms on the fullPage.js site and in the GitHub repository before you build.

Things to test

• Content taller than the screen. A section that must scroll inside itself needs a plan (the normalScrollElements option exists for this).
• Webflow scroll interactions and any other scroll library. fullPage.js takes over scrolling, so we would not run a smooth-scroll library on the same page.
• Mobile. Check both the swipe behaviour and whether full-screen sections still suit your content.

When another approach is better

If you want sections to settle into place without taking over scrolling, CSS scroll-snap needs no library or licence. If you want choreographed motion as the page scrolls, GSAP gives more control and is what we used on 4 Madeira Place and Profrakt. We chose fullPage.js for Glasshouse Digital because the brief was a slide-by-slide experience, with Webflow remaining the editing platform.

If you would rather have this built and tested, see our Webflow development page.