fullpage.js
Connect fullpage.js with Webflow to get custom scroll hijacking, involving handling momentum scrolling, keyboard navigation, touch gestures, and history state.

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
IDfullpage
containing section elements with classsection
- Initialize fullpage.js with your configuration options like
autoScrolling: true
andnavigation: 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 compatibilityscrollOverflow: true
- Allows scrollable content within sectionsautoScrolling: false
- Alternative approach for full Webflow animation supportresponsiveWidth: 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
andnavigation: true
for section dots. Add horizontal sliders within sections by nesting.slide
elements under.section
elements. ConfigureresponsiveWidth: 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. Configureanchors: ['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. AddcontrolArrows: true
for navigation arrows between slides. Disable on small screens withresponsiveHeight: 600
to restore normal scrolling when viewport height is insufficient.
Frequently asked questions
fullpage.js disables native browser scrolling and uses CSS transforms instead of actual
scrollTop
values. Webflow animations detect scroll position changes, but fullpage.js never changes the scroll position - it transforms sections instead.Fix this by initializing fullpage.js with
scrollBar: true
orautoScrolling: false
to restore native scrolling behavior. Alternatively, use fullpage.js callbacks likeafterLoad
,onLeave
, andafterSlideLeave
from the fullpage.js methods documentation to manually trigger Webflow animations through CSS class manipulation when sections become active.fullpage.js disables native browser scrolling and uses CSS transforms instead of actual
scrollTop
values. Webflow animations detect scroll position changes, but fullpage.js never changes the scroll position - it transforms sections instead.Fix this by initializing fullpage.js with
scrollBar: true
orautoScrolling: false
to restore native scrolling behavior. Alternatively, use fullpage.js callbacks likeafterLoad
,onLeave
, andafterSlideLeave
from the fullpage.js methods documentation to manually trigger Webflow animations through CSS class manipulation when sections become active.fullpage.js hijacks scroll behavior in Webflow, making the interface unscrollable. This happens because fullpage.js captures all scroll events including those needed for Editor navigation.
Implement conditional loading that only activates fullpage.js on published sites. Check the hostname before initialization to prevent the library from running in Webflow when you're editing. This lets you work normally in the Editor while maintaining full functionality on your live site.
fullpage.js hijacks scroll behavior in Webflow, making the interface unscrollable. This happens because fullpage.js captures all scroll events including those needed for Editor navigation.
Implement conditional loading that only activates fullpage.js on published sites. Check the hostname before initialization to prevent the library from running in Webflow when you're editing. This lets you work normally in the Editor while maintaining full functionality on your live site.
Yes. Fetch collection data through the Webflow CMS API before initializing fullpage.js. Use the
GET /collections/{collectionId}/items
endpoint from the CMS items reference to retrieve your content, then build fullpage.js sections dynamically.Pre-load CMS data before fullpage.js initialization rather than fetching content on demand during section transitions. After updating CMS content through the API, use fullpage.js methods like
destroy()
andreBuild()
from the methods documentation to refresh the DOM structure.Yes. Fetch collection data through the Webflow CMS API before initializing fullpage.js. Use the
GET /collections/{collectionId}/items
endpoint from the CMS items reference to retrieve your content, then build fullpage.js sections dynamically.Pre-load CMS data before fullpage.js initialization rather than fetching content on demand during section transitions. After updating CMS content through the API, use fullpage.js methods like
destroy()
andreBuild()
from the methods documentation to refresh the DOM structure.fullpage.js requires specific HTML structure and configuration. Standard Webflow navigation links don't automatically connect to fullpage.js sections.
Manually add data attributes to your sections using Webflow's custom attributes panel. Set
data-anchor
attributes on each section element with unique identifiers, then specify anchors in your fullpage.js initialization withanchors: ['section1', 'section2', 'section3']
. Create navigation links using these anchor names - fullpage.js will handle the section navigation automatically when visitors click links like#section1
or#section2
.fullpage.js requires specific HTML structure and configuration. Standard Webflow navigation links don't automatically connect to fullpage.js sections.
Manually add data attributes to your sections using Webflow's custom attributes panel. Set
data-anchor
attributes on each section element with unique identifiers, then specify anchors in your fullpage.js initialization withanchors: ['section1', 'section2', 'section3']
. Create navigation links using these anchor names - fullpage.js will handle the section navigation automatically when visitors click links like#section1
or#section2
.

Description
fullpage.js is a JavaScript library that creates full-screen scrolling websites with section-based navigation. It provides vertical scrolling with automatic section navigation, horizontal sliders within sections, CSS3-based transitions, built-in navigation bars with tooltips, anchor link support for URL-based targeting, lazy loading for media elements, and a comprehensive callback system. The library works across all modern browsers and supports full-screen content presentation for portfolios, product pages, and corporate websites.
This integration page is provided for informational and convenience purposes only.

Typed.js
Typed.js brings animated typing effects to your Webflow projects. Create engaging headlines that type, delete, and cycle through messages automatically — perfect for hero sections, testimonials, and dynamic call-to-actions that capture visitor attention without complex coding.

Typed.js
Enter in any text string, and watch it type at the speed you've set.

Sweet Text by Finsweet
Connect Sweet Text with Webflow to add advanced text styling and typography controls to your Rich Text content.

Scrollbar Styler by Finsweet
Connect Scrollbar Styler with Webflow to customize scrollbar design using visual controls and generated CSS code.

React
Connect React (powerful component architecture) with Webflow to build dynamic, interactive web experiences with real-time data, complex state management, and reusable components—all while retaining full visual design control.

F'in sweet Webflow Hacks
A custom code focused video series for Webflow websites. Learn how to use jQuery and javascript to extend the functionality of your Webflow project.

Elfsight Webflow Plugins
Connect your Webflow site with over 100 customizable, no-code widgets from Elfsight to add social feeds, forms, reviews, chat, and more—without writing a single line of code.

CMS Library: Load More
Load items from your Collection List on the same page, with Finsweet's CMS Library!

Common Ninja
Common Ninja brings over 100 customizable no-code widgets to Webflow, enabling businesses to add interactive elements like forms, reviews, countdown timers, and social proof without coding. This integration enhances user engagement, improves conversions, and extends Webflow's functionality through a simple embed process that keeps content automatically synchronized.