fullpage.js

How to integrate fullpage.js with Webflow

fullpage.js disables native browser scrolling and uses CSS transforms instead of scrollTop values. This means Webflow's scroll-into-view animations won't trigger by default. The library also changes scroll behavior in the Webflow Editor, which can make the interface difficult to use for content editors working in the CMS.

fullpage.js integrates with Webflow through code embed elements and custom code features, giving you control over scrolling behavior, section transitions, and navigation patterns. fullpage.js also provides a JavaScript API for controlling scroll behavior, while Webflow offers CMS APIs for dynamic content integration.

Embed fullpage.js with Code Embed elements

Add fullpage.js to specific pages using Webflow's custom Code Embed element. Use this method when you need full-screen scrolling on select pages like portfolio showcases or product launches without affecting your entire site.

Drag an Embed element onto your canvas and insert the complete integration code, including CSS links, HTML structure, and JavaScript initialization. You need a container div with ID fullpage and nested section elements with class section.

Here’s how to implement it:

• Add the fullpage.css stylesheet link in your embed element head
• Include the fullpage.js script from a versioned CDN for reliability
• Structure your HTML with a wrapper div ID fullpage containing section elements with class section
• Initialize fullpage.js with your configuration options like autoScrolling: true and navigation: true

Note: Webflow enforces a 50,000 character limit per embed element. If your implementation exceeds this, host the fullpage.js files externally and reference them via URLs.

Add site-wide custom code

Inject fullpage.js across your entire site through custom code fields. Use this when multiple pages need full-screen scrolling functionality with consistent configuration.

Open Site Settings > Custom Code and add your CSS and JavaScript file references in the head code section. Place the initialization script in the footer code section using DOMContentLoaded event listeners for proper timing.

Key configuration options include:

• scrollBar: true - Restores native scrolling for Webflow animation compatibility
• scrollOverflow: true - Allows scrollable content within sections
• autoScrolling: false - Alternative approach for full Webflow animation support
• responsiveWidth: 768 - Disables fullpage.js on mobile viewports

Note: Site-wide implementation affects all pages by default. Add conditional logic to your initialization script if you need fullpage.js active on specific pages only.

Implement page-level custom code

Apply fullpage.js to individual pages through your Page Settings > custom code options. Page-level code takes precedence over site-wide settings, letting you override global configurations or add functionality to specific pages.

Use this method for:

• Product landing pages requiring unique scrolling behaviors
• Portfolio sections with custom transition effects
• Campaign pages with specific navigation requirements

Build dynamic fullpage.js sections with the Webflow CMS API

Use the Webflow CMS API to fetch collection items and dynamically generate fullpage.js sections. This approach works when you need to create portfolio showcases, product galleries, or blog post layouts where each collection item becomes a fullpage.js section.

Initialize fullpage.js after retrieving CMS data through the API. You can retrieve collection items and structure the returned data for fullpage.js sections. Fetch your collection items, map them to section HTML, inject the sections into your #fullpage container, then initialize the library.

Keep in mind that all Webflow API requests require Bearer token authentication according to Webflow's authentication documentation.

What you can build

fullpage.js enables full-screen scrolling for portfolios, product showcases, and structured content sites with section-based navigation.

• Portfolio sites with full viewport sections per project: Configure fullpage.js with scrollHorizontally: true to add horizontal image galleries within sections. Traditional page scrolling is disabled, so users navigate between sections using scroll gestures or keyboard. Structure requires one .section element per project with nested .slide elements for galleries. Use conditional loading to maintain Editor usability.
• Product pages with full viewport per feature: Initialize with autoScrolling: true and navigation: true for section dots. Add horizontal sliders within sections by nesting .slide elements under .section elements. Configure responsiveWidth: 768 to disable fullpage.js on mobile viewports where standard scrolling is expected.
• Company sites with structured story segments: Set data-anchor attributes on section elements for URL-based navigation (example: #about, #mission, #team). Users can bookmark or share specific sections. Configure anchors: ['about', 'mission', 'team'] in initialization to support this behavior.
• Web-based presentations with multi-directional navigation: Combine scrollHorizontally: true with nested .slide elements under .section elements. Add controlArrows: true for navigation arrows between slides. Disable on small screens with responsiveHeight: 600 to restore normal scrolling when viewport height is insufficient.