fullPage.js

Out of the box, Webflow lacks a true full-screen snap-scroll feature. You can approximate vertical section snapping with CSS scroll-snap properties, but built-in support for dot navigation, horizontal slides within sections, section-based URL anchors, and cinematic transition effects does not exist. Building these from scratch in Webflow requires significant custom development.

fullPage.js fills that gap. Connecting fullPage.js with Webflow gives you full-screen section snapping, horizontal slide carousels, lazy-loaded media, keyboard and touch navigation, and configurable transition effects — all initialized through a few lines of code pasted into Webflow's custom code fields. fullPage.js officially documents Webflow usage, and its creator maintains official cloneable templates in the Made-in-Webflow gallery.

This integration is most relevant to creative agencies building portfolio sites, freelance designers showcasing project work, marketing teams producing product landing pages, and developers creating storytelling microsites. If you need to control the narrative pacing of a page by revealing one full-screen section at a time, fullPage.js on Webflow is a standard approach.

How to integrate fullPage.js with Webflow

What is fullPage.js? fullPage.js is a JavaScript library by Álvaro Trigo that creates full-screen, snap-scrolling websites. It runs as vanilla JavaScript with no required dependencies, though jQuery is optional, and supports vertical section snapping, horizontal slides, dot navigation, anchor-based URL history, lazy loading, and responsive breakpoints. The current version is 4.0.41, with optional paid extensions for parallax, fading effects, and cinematic transitions.

Teams use fullPage.js with Webflow when a standard scrolling page does not match the design intent. Portfolio sites, product launch pages, and brand storytelling microsites all benefit from the controlled, section-by-section viewing experience that fullPage.js provides. The library handles scroll hijacking, touch gestures, and keyboard navigation while Webflow handles layout, styling, and content management.

The fullPage.js-Webflow integration supports 3 approaches:

• Cloneable templates let you start with a pre-built Webflow project that already includes fullPage.js code, so you only need to replace content.
• Custom code injection gives you full control over fullPage.js configuration by loading the library through Webflow's page-level custom code in head and body tags.
• The Webflow Data API enables dynamic section generation from Webflow CMS content, but requires server-side development.

Most implementations use custom code injection. Cloneable templates work well for quick starts, and the API path suits CMS-heavy sites where each collection item maps to a fullPage.js section.

Clone a pre-built fullPage.js template

The fastest way to get fullPage.js running on Webflow is to clone a template from the Made-in-Webflow gallery. These projects ship with the library's CSS, JavaScript, and initialization code already embedded. You replace the placeholder content with your own and publish with no code editing required beyond updating your license key.

Several community templates and official examples are available, each demonstrating different fullPage.js features. The library creator has submitted official cloneable projects directly to the gallery, and community builders have created templates with features like Webflow animation compatibility and Client-First structural organization.

[image placeholder]

To start with a cloneable template:

1. Browse the Made-in-Webflow fullPage.js gallery and select a template that matches your layout needs.
2. Click Clone Project to copy the template into your Webflow workspace.
3. Open the cloned project, then go to the Pages panel, hover over the page using fullPage.js, click the gear icon, and scroll to the Custom Code section.
4. Replace YOUR_KEY_HERE in the initialization script with your fullPage.js commercial license key.
5. Replace the template's placeholder content with your own text, images, and media.
6. Publish the site and test on the live URL — custom code does not run in the Webflow preview.

Notable cloneable templates include:

• Simple Snap Scroll with FullPage.js by Dominik Fojcik — over 9,700 clones, built on Client-First naming conventions
• fullPage.js basic example by Álvaro Trigo — the library creator's official starter template with 1,300 clones
• fullpage-js-interactions by John Marsh — demonstrates scrollBar: true for Webflow animation compatibility

Cloneable templates are the right starting point when you want a working fullPage.js setup immediately. For custom configurations, anchor definitions, or extension support, move to the custom code injection method below.

Add fullPage.js with custom code

Custom code injection gives you direct control over every fullPage.js option. You load the library's CSS and JavaScript through Webflow's page-level custom code fields, build the required HTML structure using Div Blocks in Webflow, and initialize the library with your chosen configuration. This method works on any paid Webflow site plan and supports the full range of fullPage.js features including extensions.

Before starting, confirm three prerequisites. You need a paid Webflow site plan — custom code does not render on free plans. You need a fullPage.js commercial license for any client or non-open-source project. And you should not add a separate jQuery script tag — Webflow already ships jQuery v3.5.1, and loading a second version causes conflicts.

[image placeholder]

Load the fullPage.js library

The library requires two files: a CSS stylesheet and a JavaScript file. Add both through page-level custom code to keep fullPage.js scoped to the pages that use it.

To load the library files:

1. Open Webflow, click the Pages panel in the left sidebar, hover over your target page, and click the gear icon.
2. Scroll to the Custom Code section.
3. In the Inside <head> tag field, paste the CSS link:

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



4. In the Before </body> tag field, paste the JavaScript and initialization code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>
<script>
 $(document).ready(function() {
   if (!document.documentElement.classList.contains('wf-design-mode')) {
     $('#fullpage').fullpage({
       licenseKey: 'YOUR_KEY_HERE',
       autoScrolling: true,
       navigation: true,
       responsiveWidth: 768,
       scrollBar: true
     });
   }
 });
</script>



Because fullPage.js is dependency-free, you can also initialize it with vanilla JavaScript instead of the jQuery plugin syntax:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>
<script>
 if (!document.documentElement.classList.contains('wf-design-mode')) {
   new fullpage('#fullpage', {
     licenseKey: 'YOUR_KEY_HERE',
     autoScrolling: true,
     navigation: true,
     responsiveWidth: 768,
     scrollBar: true
   });
 }
</script>



The jQuery example is shown here because Webflow already includes jQuery, not because fullPage.js requires it. Pin the version number in your CDN URL (for example, 4.0.20). The snippets above use a pinned sample version for implementation stability, while the library version referenced earlier in this guide is the current release. A versionless URL can auto-update to a new major version that breaks your license key and implementation.

Build the page structure in Webflow

fullPage.js expects a specific DOM structure: a wrapper element with ID fullpage containing direct-child divs with class section. You build this using Div Blocks in Webflow — not Webflow's native Section element, which adds structural attributes that interfere with fullPage.js targeting.

To create the required structure:

1. Open the Add panel (+ icon in the left sidebar) and drag a Div Block onto the canvas.
2. Select it, open the Element Settings panel (gear icon on the right sidebar), and set the ID field to fullpage.
3. Drag another Div Block inside the #fullpage wrapper.
4. Assign it the class section in the Style panel and set its height to 100VH.
5. Duplicate the .section div for each additional full-screen section you need.
6. Add your content — text, images, video, Collection List elements — inside each .section div.

The resulting structure in the Navigator panel looks like this:

Body
└── Div Block [ID: fullpage]
   ├── Div Block [Class: section] [Height: 100VH]
   ├── Div Block [Class: section] [Height: 100VH]
   └── Div Block [Class: section] [Height: 100VH]



For horizontal slides within a section, add child Div Blocks with class slide inside any .section div. Publish the site and test on the live URL to verify the setup.

Handle Webflow scroll animation conflicts

Webflow scroll-triggered interactions detect the browser's native scrollTop position. fullPage.js replaces native scrolling with CSS translate3d transforms, so the scroll position never changes and Webflow's "scroll into view" and "while page is scrolling" triggers never fire. This is the most-documented conflict between the two tools.

Three workarounds address this:

• Set scrollBar: true in your fullPage.js initialization (included in the code example above). This restores the native scrollbar so Webflow animations can detect scroll position. The trade-off is reduced snap behavior and potential frame rate drops with fixed or sticky elements inside the wrapper.
• Use fullPage.js callbacks like afterLoad and onLeave to add and remove CSS classes that trigger animations. This requires writing JavaScript but gives you precise control over when animations fire.
• Use fullPage.js CSS state classes — the library adds active to the current section and fp-viewing-SECTION-SLIDE to the <body> element. You can target these classes in Webflow's conditional visibility or in a Code Embed <style> block.

Page Load interactions work without workarounds. The conflict only affects scroll-triggered animations.

Prevent fullPage.js from breaking the Webflow Editor

When a client opens the Webflow Editor to update CMS content, fullPage.js can initialize and break the editor interface. The conditional check in the initialization code above (wf-design-mode class detection) is a documented mitigation pattern, but you should confirm it on the specific site and editing workflow you support. If you use a different initialization pattern, add this guard:

if (!document.documentElement.classList.contains('wf-design-mode')) {
 // initialize fullPage.js here
}



Any agency deploying fullPage.js on a site where clients edit CMS content should test this behavior before launch. Without a working guard, clients may be unable to use the editor as expected.

Configure mobile responsiveness

Set responsiveWidth: 768 to disable fullPage.js on viewports narrower than 768 pixels. Below that breakpoint, the page falls back to native scrolling. This is the most reliable approach given multiple documented issues with fullPage.js touch handling on iOS and Android, including keyboard overlap on form inputs and slide-jumping behavior.

Build CMS-driven sections with the Webflow Data API

For sites where each CMS collection item should map to a fullPage.js section, the Webflow CMS API lets you fetch collection items and dynamically generate the section HTML. This approach requires server-side development and is relevant when the number of sections changes based on CMS content — portfolio projects, product features, or team members managed through the CMS.

The relevant APIs for this workflow are:

• The Webflow CMS Collection Items API retrieves items from any collection, filtered by custom fields
• The Webflow Custom Code API can programmatically register and apply scripts to specific pages
• fullPage.js has no server-side API — it is 100% client-side, so all server interaction happens through the Webflow API

This path is only necessary when static Div Blocks in Webflow cannot represent the section structure. For most sites, nesting CMS content inside static .section wrappers (using the custom code method above) is simpler and avoids API development entirely.

Fetch CMS items and generate sections

A typical implementation fetches collection items from the Webflow CMS API, maps each item to a .section div, injects the resulting HTML into the #fullpage wrapper, and then initializes fullPage.js.

To implement this:

1. Create a CMS collection in Webflow for your sections. Add fields for section title, background image, body content, and a sort-order number.
2. Generate a Webflow API token with CMS:read scope from your site's Integrations settings.
3. On your server or serverless function, call GET /v2/collections/:collection_id/items with your bearer token to retrieve the items.
4. Map each item to an HTML string: <div class="section">...</div>.
5. Inject the generated HTML into the #fullpage wrapper on the page using either the Custom Code API or a client-side fetch-and-render approach.
6. Initialize fullPage.js after the DOM is populated with the section elements.

This workflow makes sense when the section structure needs to be generated from CMS content rather than modeled as static wrappers in Webflow.

The observer: true option in fullPage.js automatically rebuilds its internal structure when the DOM changes, which helps when sections are injected after initial page load. For static content that does not change frequently, consider pre-rendering sections at build time rather than fetching on every page load.

What can you build with the fullPage.js Webflow integration?

Integrating fullPage.js with Webflow lets you create immersive, section-based scrolling experiences without building scroll-hijacking logic from scratch.

• Agency portfolio sites: Build a case study showcase where each scroll reveals one project at full-screen scale — with video backgrounds, horizontal slide carousels for project images, and dot navigation for jumping between clients. The Machbar brand agency site demonstrates this pattern with video backgrounds and full-screen sections.
• Product landing pages: Walk prospects through a problem-solution-features-CTA narrative where each section occupies the full viewport. Anchor URLs let you deep-link directly to the pricing or features section from ad campaigns or email CTAs.
• Storytelling microsites: Create scroll-driven brand narratives or event pages where horizontal slides serve as timelines and vertical sections pace the story. The Hotel Zola site uses parallax backgrounds and full-screen sections for a property showcase.
• Interactive presentations: Replace slide decks with browser-based presentations that are shareable via URL. Each section acts as a slide, keyboard navigation (arrows, spacebar, Page Up/Down) works natively, and anchor URLs generate direct links to any section — useful for investor decks or onboarding walkthroughs.

If you need more control over dynamic section generation from CMS content, the API integration path covers those cases with full flexibility.