# alvarotrigo/fullpage.js architecture

> Architecture diagram of the GitHub repository alvarotrigo/fullpage.js, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/alvarotrigo/fullpage.js
- Repository: https://github.com/alvarotrigo/fullpage.js

## Overview

fullPage.js is a browser-side library for full-screen vertical sections and horizontal slides. A site supplies the wrapper and section markup, then initializes the library; input, anchors, menus, and navigation can request movement, which updates the active DOM/state and exposes callbacks. The graph preserves documented lazy loading, media handling, responsive behavior, and scroll overflow. Most edges are supported by the README or the SOURCE INDEX import references; unsampled implementation details are not inferred.

Main entry points: [`src/js/fullpage.js`](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/fullpage.js) (FullPage API), [`src/js/scroll/scrollHandler.js`](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scroll/scrollHandler.js) (Scroll lifecycle), [`src/js/scroll/scrollPage.js`](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scroll/scrollPage.js) (Section scrolling), [`src/js/slides/moveSlide.js`](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/slides/moveSlide.js) (Slide movement)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Setup and structure"]
  node_app["Browser entry<br/>[app.js]"]
  node_engine["FullPage API<br/>[fullpage.js]"]
  node_dom["DOM preparation<br/>[prepareDom.js]"]
  node_teardown["DOM teardown"]
end

subgraph group_interaction["Input and movement"]
  node_input["Pointer and wheel<br/>[wheel.js]"]
  node_keyboard["Keyboard controls<br/>[index.js]"]
  node_scroll["Section scrolling<br/>[scrollPage.js]"]
  node_scrollhandler["Scroll lifecycle<br/>[scrollHandler.js]"]
  node_slides["Slide movement<br/>[moveSlide.js]"]
  node_beyond["Page-boundary scroll"]
end

subgraph group_features["Navigation and features"]
  node_anchors["Anchor navigation<br/>[index.js]"]
  node_nav["Section and slide nav<br/>[sections.js]"]
  node_menu["Menu synchronization"]
  node_lazy["Lazy loading<br/>[lazyLoad.js]"]
  node_media["Embedded media<br/>[media.js]"]
  node_overflow["Scroll overflow<br/>[scrolloverflow.js]"]
  node_responsive["Responsive mode<br/>[responsive.js]"]
  node_stateupdates["Active state updates<br/>[stateUpdates.js]"]
  node_callbacks["Callbacks and events<br/>[fireCallback.js]"]
end

subgraph group_core["Shared runtime"]
  node_config["Options and state<br/>[options.js]"]
  node_state["Runtime state<br/>[state.js]"]
  node_utils["DOM utilities<br/>[utils.js]"]
  node_cache["DOM cache<br/>[cache.js]"]
  node_items["Section and slide items<br/>[item.js]"]
  node_scrollto["Scroll abstraction<br/>[scrollTo.js]"]
  node_selectors["DOM selectors<br/>[selectors.js]"]
  node_emitter["Internal event emitter<br/>[eventEmitter.js]"]
end

node_site(("Site markup"))

node_site -->|"includes script"| node_app
node_site -->|"provides structure"| node_dom
node_app -->|"loads"| node_engine
node_engine -.->|"prepares markup"| node_dom
node_engine -->|"configures"| node_anchors
node_engine -->|"configures"| node_nav
node_engine -->|"configures"| node_scroll
node_input -->|"delegates boundary"| node_beyond
node_input -->|"requests movement"| node_scroll
node_keyboard -->|"requests movement"| node_scroll
node_keyboard -->|"moves slides"| node_slides
node_scroll -.->|"handles movement"| node_scrollhandler
node_scrollhandler -->|"updates state"| node_stateupdates
node_scrollhandler -->|"loads content"| node_lazy
node_scrollhandler -->|"controls playback"| node_media
node_scrollhandler -->|"fires callbacks"| node_callbacks
node_scrollhandler -->|"updates menu"| node_menu
node_slides -->|"updates state"| node_stateupdates
node_slides -->|"loads content"| node_lazy
node_slides -->|"controls playback"| node_media
node_slides -->|"sets page status"| node_anchors
node_anchors -->|"requests destination"| node_scroll
node_nav -.->|"emits events"| node_callbacks
node_menu -->|"reads navigation"| node_nav
node_overflow -->|"fires callbacks"| node_callbacks
node_engine -.->|"configures mode"| node_responsive
node_engine -.->|"configures overflow"| node_overflow
node_config -.->|"configures runtime"| node_state
node_callbacks -->|"reads options"| node_config
node_callbacks -->|"reads state"| node_state
node_dom -.->|"builds items"| node_items
node_dom -.->|"uses selectors"| node_selectors
node_engine -->|"destroys structure"| node_teardown
node_scroll -.->|"uses scrolling"| node_scrollto
node_scrollhandler -->|"uses cache"| node_cache
node_keyboard -->|"emits events"| node_emitter
node_utils -.->|"queries DOM"| node_selectors

click node_app "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/app.js"
click node_engine "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/fullpage.js"
click node_dom "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/dom/prepareDom.js"
click node_teardown "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/dom/destroyStructure.js"
click node_input "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/mouse/wheel.js"
click node_keyboard "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/keyboard/index.js"
click node_scroll "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scroll/scrollPage.js"
click node_scrollhandler "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scroll/scrollHandler.js"
click node_slides "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/slides/moveSlide.js"
click node_beyond "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/beyondFullpage/beyondFullPageHandler.js"
click node_anchors "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/anchors/index.js"
click node_nav "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/nav/sections.js"
click node_menu "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/menu/activateMenuAndNav.js"
click node_lazy "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/lazyLoad/lazyLoad.js"
click node_media "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/media.js"
click node_overflow "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scrolloverflow.js"
click node_responsive "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/responsive.js"
click node_stateupdates "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/stateUpdates.js"
click node_callbacks "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/callbacks/fireCallback.js"
click node_config "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/options.js"
click node_state "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/state.js"
click node_utils "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/utils.js"
click node_cache "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/cache.js"
click node_items "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/item.js"
click node_scrollto "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/scrollTo.js"
click node_selectors "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/selectors.js"
click node_emitter "https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/eventEmitter.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_engine,node_dom,node_teardown toneBlue
class node_input,node_keyboard,node_scroll,node_scrollhandler,node_slides,node_beyond toneAmber
class node_anchors,node_nav,node_menu,node_lazy,node_media,node_overflow,node_responsive,node_stateupdates,node_callbacks toneMint
class node_config,node_state,node_utils,node_cache,node_items,node_scrollto,node_selectors,node_emitter toneRose
class node_site toneIndigo
```

## Components

### Setup and structure

- [Browser entry](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/app.js): `src/js/app.js`
- [FullPage API](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/fullpage.js): `src/js/fullpage.js`
- [DOM preparation](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/dom/prepareDom.js): `src/js/dom/prepareDom.js`
- [DOM teardown](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/dom/destroyStructure.js): `src/js/dom/destroyStructure.js`

### Input and movement

- [Pointer and wheel](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/mouse/wheel.js): `src/js/mouse/wheel.js`
- [Keyboard controls](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/keyboard/index.js): `src/js/keyboard/index.js`
- [Section scrolling](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scroll/scrollPage.js): `src/js/scroll/scrollPage.js`
- [Scroll lifecycle](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scroll/scrollHandler.js): `src/js/scroll/scrollHandler.js`
- [Slide movement](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/slides/moveSlide.js): `src/js/slides/moveSlide.js`
- [Page-boundary scroll](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/beyondFullpage/beyondFullPageHandler.js): `src/js/beyondFullpage/beyondFullPageHandler.js`

### Navigation and features

- [Anchor navigation](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/anchors/index.js): `src/js/anchors/index.js`
- [Section and slide nav](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/nav/sections.js): `src/js/nav/sections.js`
- [Menu synchronization](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/menu/activateMenuAndNav.js): `src/js/menu/activateMenuAndNav.js`
- [Lazy loading](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/lazyLoad/lazyLoad.js): `src/js/lazyLoad/lazyLoad.js`
- [Embedded media](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/media.js): `src/js/media.js`
- [Scroll overflow](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/scrolloverflow.js): `src/js/scrolloverflow.js`
- [Responsive mode](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/responsive.js): `src/js/responsive.js`
- [Active state updates](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/stateUpdates.js): `src/js/stateUpdates.js`
- [Callbacks and events](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/callbacks/fireCallback.js): `src/js/callbacks/fireCallback.js`

### Shared runtime

- [Options and state](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/options.js): `src/js/common/options.js`
- [Runtime state](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/state.js): `src/js/common/state.js`
- [DOM utilities](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/utils.js): `src/js/common/utils.js`
- [DOM cache](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/cache.js): `src/js/common/cache.js`
- [Section and slide items](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/item.js): `src/js/common/item.js`
- [Scroll abstraction](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/scrollTo.js): `src/js/common/scrollTo.js`
- [DOM selectors](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/selectors.js): `src/js/common/selectors.js`
- [Internal event emitter](https://github.com/alvarotrigo/fullpage.js/blob/master/src/js/common/eventEmitter.js): `src/js/common/eventEmitter.js`

### Other components

- **Site markup**

## Connections

- Site markup → Browser entry: includes script
- Site markup → DOM preparation: provides structure
- Browser entry → FullPage API: loads (evidence: `src/js/app.js`)
- FullPage API → DOM preparation: prepares markup (evidence: `src/js/fullpage.js`)
- FullPage API → Anchor navigation: configures (evidence: `src/js/fullpage.js`)
- FullPage API → Section and slide nav: configures (evidence: `src/js/fullpage.js`)
- FullPage API → Section scrolling: configures (evidence: `src/js/fullpage.js`)
- Pointer and wheel → Page-boundary scroll: delegates boundary (evidence: `src/js/mouse/wheel.js`)
- Pointer and wheel → Section scrolling: requests movement (evidence: `src/js/mouse/wheel.js`)
- Keyboard controls → Section scrolling: requests movement (evidence: `src/js/keyboard/index.js`)
- Keyboard controls → Slide movement: moves slides (evidence: `src/js/keyboard/index.js`)
- Section scrolling → Scroll lifecycle: handles movement
- Scroll lifecycle → Active state updates: updates state (evidence: `src/js/scroll/scrollHandler.js`)
- Scroll lifecycle → Lazy loading: loads content (evidence: `src/js/scroll/scrollHandler.js`)
- Scroll lifecycle → Embedded media: controls playback (evidence: `src/js/scroll/scrollHandler.js`)
- Scroll lifecycle → Callbacks and events: fires callbacks (evidence: `src/js/scroll/scrollHandler.js`)
- Scroll lifecycle → Menu synchronization: updates menu (evidence: `src/js/scroll/scrollHandler.js`)
- Slide movement → Active state updates: updates state
- Slide movement → Lazy loading: loads content
- Slide movement → Embedded media: controls playback
- Slide movement → Anchor navigation: sets page status
- Anchor navigation → Section scrolling: requests destination (evidence: `src/js/anchors/index.js`)
- Section and slide nav → Callbacks and events: emits events
- Menu synchronization → Section and slide nav: reads navigation (evidence: `src/js/menu/activateMenuAndNav.js`)
- Scroll overflow → Callbacks and events: fires callbacks (evidence: `src/js/scrolloverflow.js`)
- FullPage API → Responsive mode: configures mode
- FullPage API → Scroll overflow: configures overflow
- Options and state → Runtime state: configures runtime
- Callbacks and events → Options and state: reads options (evidence: `src/js/callbacks/fireCallback.js`)
- Callbacks and events → Runtime state: reads state (evidence: `src/js/callbacks/fireCallback.js`)
- DOM preparation → Section and slide items: builds items
- DOM preparation → DOM selectors: uses selectors
- FullPage API → DOM teardown: destroys structure (evidence: `src/js/fullpage.js`)
- Section scrolling → Scroll abstraction: uses scrolling
- Scroll lifecycle → DOM cache: uses cache (evidence: `src/js/scroll/scrollHandler.js`)
- Keyboard controls → Internal event emitter: emits events (evidence: `src/js/keyboard/index.js`)
- DOM utilities → DOM selectors: queries DOM