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

Integrating fullPage.js with Webflow scroll interactions requires careful planning because both systems control page scrolling in different ways. Here's how to make them work together effectively.

1. Understand Compatibility Limits

• fullPage.js takes full control over scroll behavior, adding its own scrolling container and hijacking normal scroll interactions.
• Webflow scroll interactions (such as “While Scrolling in View” or “Page Scrolled” animations) rely on native scrolling and may not work as expected with fullPage.js.
• This means you must choose one system to control scroll or isolate them to separate sections.

2. Add fullPage.js to Your Webflow Project

• Upload fullPage.js library using the Page Settings > Custom Code:
• Add the CDN links for fullPage.js and fullPage.css in the Before tag section.
• Initialize fullPage.js in Before tag with a simple new fullpage('#fullpage', {...}); inside a <script> tag.

3. Structure Your Webflow Page Properly

• Wrap all fullPage.js sections inside a single container with an ID of "fullpage".
• Each full-screen section must use the class section or any class you define in fullPage.js options.
• Avoid using Webflow’s default Section element unless you give it the required class.

4. Disable/Limit Webflow Scroll Interactions

• Avoid Page Scroll-based interactions (e.g., scroll reveal animations or “Page Scrolled” triggers), because they conflict with fullPage.js's control over scroll.
• Use “While Element is in View” triggers sparingly and test the rendering—these are sometimes unreliable with fullPage.js since scroll isn't continuous.
• For best results, use fullPage.js callbacks like afterLoad, onLeave, or afterRender to trigger Webflow-like animations via classes, jQuery, or Webflow IX2 API.

5. Trigger Webflow Animations Programmatically

• To bridge animations, you can:
• Use fullPage.js events like afterLoad to add/remove classes to elements.
• Create Webflow animations bound to a class (e.g., .animate-on-load) and trigger them via JavaScript by applying the class at the correct time.

6. Load fullPage.js After Webflow

• Be sure to initialize fullPage.js after Webflow has finished loading.
• Wrap the initialization in a Webflow.push(function() {}) block to avoid timing issues:
• Example: Webflow.push(function() { new fullpage('#fullpage', { ... }); });

Summary

To use fullPage.js and Webflow interactions, structure your site around fullPage.js scrolling rules and avoid Webflow’s native scroll interactions. Trigger animations via fullPage.js events using class-based animations instead of scroll triggers to ensure smooth behavior.