Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Add fullPage.js via Custom Code, wrap content in a #fullpage container, and structure sections per fullPage.js requirements.
  • Disable Webflow scroll interactions and trigger animations using fullPage.js events like afterLoad by adding/removing classes or using the Webflow IX2 API.
  • Initialize fullPage.js after Webflow loads by wrapping it in Webflow.push(function() {}).

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.

Rate this answer

Other Webflow Questions