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.
tag with a simple new fullpage('#fullpage', {...});
inside a <script>
tag.
Section
element unless you give it the required class.afterLoad
, onLeave
, or afterRender
to trigger Webflow-like animations via classes, jQuery, or Webflow IX2 API.afterLoad
to add/remove classes to elements..animate-on-load
) and trigger them via JavaScript by applying the class at the correct time.Webflow.push(function() {})
block to avoid timing issues:Webflow.push(function() { new fullpage('#fullpage', { ... }); });
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.