How can I integrate fullPage JS and Webflow scroll interactions on my site?

TL;DR

Restrict fullPage.js to specific sections using a #fullpage wrapper and keep Webflow scroll interactions outside of it.
Add fullPage.js and CSS via Custom Code, initialize it in the footer, and use fullPage callbacks to trigger animations inside fullPage when needed.

To integrate fullPage.js with Webflow scroll interactions, you need to coordinate the scroll control between fullPage.js and Webflow's native Interactions system, which can conflict if not configured properly.

1. Understand the Conflict

fullPage.js takes over native scrolling behavior to implement full-screen sections.
Webflow’s scroll-based interactions (e.g., element animations on scroll) rely on native browser scroll, which fullPage disables.
The key is to restrict fullPage.js to certain areas (e.g., a homepage section) and allow normal scrolling elsewhere for Webflow animations to work.

2. Configure Your Webflow Layout

Design each full-screen section inside a div with a common class like section.
Use a wrapper div with an ID like #fullpage to contain only the fullPage.js sections.
Use separate sections (outside of the #fullpage area) for content that uses Webflow scroll interactions.

3. Add fullPage.js to Webflow

Include fullPage.js and its CSS files in your project:
Go to Project Settings > Custom Code > Head Code, and add CDNs for fullPage.js and its CSS.
Or add them via Page Settings > Custom Code for specific pages only.

Example (inline):

CSS: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.13/fullpage.min.css" />

JavaScript: <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.13/fullpage.min.js"></script>

4. Initialize fullPage.js

Add this inside Page Settings > Footer Custom Code (before closing </body> tag):

<script>
  new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    licenseKey: 'YOUR_KEY_HERE',
    afterLoad: function(origin, destination, direction){
      // Optional: trigger Webflow interactions manually here
    }
  });
</script>

Replace YOURKEYHERE with your fullPage.js license key if you purchased a Pro version.

5. Set Webflow Interactions Outside fullPage

Use Webflow scroll interactions only on sections or elements outside of #fullpage.
Webflow’s While Page is Scrolling triggers won’t work within fullPage because fullPage disables native scrolling.
If you want animations within fullPage sections:
Use fullPage.js callbacks like afterLoad or onLeave.
Combine those with data-w-id attributes or manually trigger interactions using Webflow’s Webflow.require('ix2').init() method.

6. Use Hybrid Mode (Optional)

If you need a mix of fullPage and normal scrolling, use fullPage's autoScrolling: false with anchors.
Or limit fullPage to a div inside only part of the page, with other areas using standard scrolling.

Summary

To integrate fullPage.js with Webflow scroll interactions, isolate fullPage.js to specific sections using a wrapper, avoid scroll-based interactions inside those sections, and allow normal scrolling in other areas for Webflow’s interactions to work. You can use fullPage callbacks to trigger animations if needed within fullPage-controlled areas.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer