# alvarotrigo/pagepiling.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/alvarotrigo-pagepiling-js).**

4,094 stars · 635 forks · JavaScript

## Links

- GitHub: https://github.com/alvarotrigo/pagePiling.js
- awesome-repositories: https://awesome-repositories.com/repository/alvarotrigo-pagepiling-js.md

## Topics

`javascript` `jquery` `mousewheel` `onepage` `scrolling` `slide` `snap` `swipe`

## Description

pagePiling.js is a JavaScript full-page scrolling library used to create stacked layouts of full-screen sections. It functions as a section-based layout engine and an input-driven page navigator that manages movement across mouse wheels, touch gestures, and keyboard inputs.

The library synchronizes page sections with unique URL anchors to enable direct linking and bookmarking. It includes a lifecycle event handler that executes custom JavaScript callbacks when sections are rendered, loaded, or exited during transitions.

The system provides capabilities for programmatic section navigation, synchronized navigation menus, and independent scrolling for sections that exceed the viewport height.

## Tags

### User Interface & Experience

- [Stacked Section Layouts](https://awesome-repositories.com/f/user-interface-experience/stacked-section-layouts.md) — Implements a layered layout engine that manages full-screen sections through vertical or horizontal scrolling transitions. ([source](https://github.com/alvarotrigo/pagePiling.js/blob/master/README.md))
- [Navigation Input Controllers](https://awesome-repositories.com/f/user-interface-experience/navigation-input-controllers.md) — Translates mouse wheel, touch gestures, and keyboard inputs into a unified set of section transition commands.
- [Programmatic Section Navigation](https://awesome-repositories.com/f/user-interface-experience/programmatic-section-navigation.md) — Provides an API-driven interface to programmatically move the viewport to specific page sections by index or anchor link. ([source](https://github.com/alvarotrigo/pagePiling.js/blob/master/README.md))
- [UI Layer Stacking](https://awesome-repositories.com/f/user-interface-experience/visual-layering-systems/ui-layer-stacking.md) — Arranges page content into overlapping vertical or horizontal containers that transition based on user input.
- [Independent Section Scrollbars](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/dynamic-section-heights/independent-section-scrollbars.md) — Enables internal content scrolling within individual sections that exceed the viewport height.
- [Lifecycle Event Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/component-events/lifecycle-event-handlers.md) — Handles custom JavaScript callbacks during the creation and transition of full-page layout sections.
- [Interactive Motion Landing Pages](https://awesome-repositories.com/f/user-interface-experience/landing-page-templates/presentation-landing-pages/interactive-motion-landing-pages.md) — Facilitates presentation-style landing pages with synchronized menus and scroll-triggered animations.
- [Navigation Menu Synchronization](https://awesome-repositories.com/f/user-interface-experience/programmatic-section-navigation/navigation-menu-synchronization.md) — Automatically synchronizes the active state of navigation menu items with the currently visible page section. ([source](https://github.com/alvarotrigo/pagepiling.js#readme))
- [Section Lifecycle Triggers](https://awesome-repositories.com/f/user-interface-experience/section-lifecycle-triggers.md) — Executes custom logic at specific moments, such as when a section finishes loading or is exited. ([source](https://github.com/alvarotrigo/pagePiling.js/blob/master/README.md))
- [Route Synchronization](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/route-synchronization.md) — Synchronizes the active page section with the browser URL for direct linking and state persistence.
- [URL-Synchronized Navigation](https://awesome-repositories.com/f/user-interface-experience/url-synchronized-navigation.md) — Synchronizes page sections with unique URL anchors to enable direct linking and bookmarking.

### Web Development

- [Full Page Scroll Libraries](https://awesome-repositories.com/f/web-development/full-page-scroll-libraries.md) — Implements a viewport-based section snapping experience where scrolling triggers discrete movements between full-screen sections.
- [Full Page Scrolling Layouts](https://awesome-repositories.com/f/web-development/full-page-scrolling-layouts.md) — Creates layouts consisting of a series of full-screen sections navigated one page at a time.
- [Section-Based Layout Engines](https://awesome-repositories.com/f/web-development/section-based-layout-engines.md) — Arranges web content into layered piles with support for independent scrollbars in oversized sections.
- [Page Transition Controls](https://awesome-repositories.com/f/web-development/page-transition-controls.md) — Manages the flow of a website by executing specific code and visual changes during section transitions.

### Part of an Awesome List

- [Programmatic Transition Functions](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-transitions/transition-animation-engines/programmatic-transition-functions.md) — Moves the viewport to specific section indices or anchors through controlled JavaScript animation sequences.

### Content Management & Publishing

- [Anchor Links](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/document-models/document-sectioning/anchor-links.md) — Connects individual sections to unique URL anchors for direct navigation via bookmarks or menus. ([source](https://github.com/alvarotrigo/pagePiling.js/blob/master/README.md))

### Software Engineering & Architecture

- [Lifecycle Callbacks](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-callbacks/lifecycle-callbacks.md) — Provides custom JavaScript callbacks that trigger at specific transition milestones during section entry and exit.