What is fullpage.js?

alvarotrigo/fullpage.js — explained in plain English

Analysis updated 2026-06-20

★ 35,467JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((fullPage.js))
    Core Behavior
      Fullscreen sections
      Page snap scrolling
      Horizontal slides
    Navigation
      Mouse scroll
      Touch swipe
      Arrow keys
      Navigation dots
    Framework Integrations
      React
      Vue
      Angular
      Plain JavaScript
    Use Cases
      Portfolio sites
      Product launches
      Agency pages

mindmap root((fullPage.js)) Core Behavior Fullscreen sections Page snap scrolling Horizontal slides Navigation Mouse scroll Touch swipe Arrow keys Navigation dots Framework Integrations React Vue Angular Plain JavaScript Use Cases Portfolio sites Product launches Agency pages

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Build a portfolio or agency website where scrolling snaps between full-screen sections instead of flowing continuously down the page.

USE CASE 2

Create a product launch page with fullscreen panels, each with a different background image or color, navigated by scrolling or clicking dots.

USE CASE 3

Add horizontal slide sections within a fullPage.js layout to showcase a gallery or step-by-step feature walkthrough.

USE CASE 4

Integrate fullscreen snap scrolling into a React, Vue, or Angular app using the official framework wrapper packages.

What is it built with?

JavaScriptReactVueAngular

How does it compare?

	alvarotrigo/fullpage.js	jondot/awesome-react-native	koajs/koa
Stars	35,467	35,672	35,705
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	easy	easy
Complexity	2/5	1/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires a paid commercial license if the project generates any revenue, free only for open-source and non-commercial use.

Free to use in open-source and non-commercial projects under GPL, requires a paid commercial license for use in any product that generates revenue.

So what is it?

fullPage.js is a JavaScript library for creating websites where scrolling moves between full-screen sections rather than flowing continuously down the page. The problem it solves is that building this kind of "fullscreen scrolling" or "page snapping" behavior from scratch, where each scroll brings you to a completely new section that fills the entire browser window, requires careful handling of scroll events, keyboard navigation, touch gestures, and animations, which is complex to get right across all browsers and devices. With fullPage.js, you structure your HTML into sections and optional slides (for horizontal scrolling within a section), include the library, and the snapping behavior is applied automatically. Navigation between sections can be triggered by scrolling the mouse wheel, swiping on touch devices, pressing arrow keys, or clicking navigation dots that the library generates. You can also set each section to have a different background color or image and add custom scrolling animations. The library works with plain JavaScript and also has official integration packages for the three major frontend frameworks: React, Vue, and Angular. It is dual-licensed, free for open source and non-commercial projects under the GPL license, and commercially licensed for use in paid products. A web developer or designer building a portfolio, landing page, or presentation-style website who wants the visually impactful fullscreen section layout, the kind common on agency and product launch pages, would use fullPage.js. It is written in JavaScript, installed via npm or a CDN script tag, and requires no additional dependencies.

Copy-paste prompts

Prompt 1

I have a 4-section landing page using fullPage.js. Help me add a custom animation that slides in text from the left when each section becomes active, using the afterLoad callback in fullPage.js.

Prompt 2

Set up a fullPage.js site with React where each section has a unique background color, navigation dots on the right side, and arrow-key navigation between sections. Give me the full component code.

Prompt 3

I'm using fullPage.js with horizontal slides inside section 2. Write the JavaScript to programmatically jump to the third slide of section 2 when a button is clicked.

Prompt 4

Show me how to configure fullPage.js so that the fullscreen snap behavior is disabled on mobile screens narrower than 768px and the page falls back to normal scrolling.

Frequently asked questions