fullpage.js

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

Install app
View website
View lesson
A record settings
CNAME record settings
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.

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 or autoScrolling: false to restore native scrolling behavior. Alternatively, use fullpage.js callbacks like afterLoad, onLeave, and afterSlideLeave 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 or autoScrolling: false to restore native scrolling behavior. Alternatively, use fullpage.js callbacks like afterLoad, onLeave, and afterSlideLeave 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() and reBuild() 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() and reBuild() 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 with anchors: ['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 with anchors: ['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
fullpage.js
Joined in

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.

Install app

This integration page is provided for informational and convenience purposes only.


Other Plugins and integrations library integrations

Other Plugins and integrations library integrations

Typed.js

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.

Plugins and integrations library
Learn more
Typed.js

Typed.js

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

Plugins and integrations library
Learn more
Sweet Text by Finsweet

Sweet Text by Finsweet

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

Plugins and integrations library
Learn more
Scrollbar Styler by Finsweet

Scrollbar Styler by Finsweet

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

Plugins and integrations library
Learn more
React

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.

Plugins and integrations library
Learn more
F'in sweet Webflow Hacks

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.

Plugins and integrations library
Learn more
Elfsight Webflow Plugins

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.

Plugins and integrations library
Learn more
CMS Library: Load More

CMS Library: Load More

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

Plugins and integrations library
Learn more
Common Ninja

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.

Plugins and integrations library
Learn more

Related integrations

No items found.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free