FullPage Scroll

A lightweight and customizable full-page scrolling library with TypeScript support. Built with functional programming principles for better composability and state management.

Features

• 🚀 Smooth section-by-section scrolling
• 📦 Zero dependencies
• 🔧 Customizable animations and transitions
• 📱 Mobile-friendly
• 🎯 TypeScript support
• 🎨 Easy to style and customize

Installation

npm install fullscroll-js
# or
yarn add fullscroll-js
# or
pnpm add fullscroll-js

Basic Usage

<main full-page>
  <section full-section>
    <div class="section-content">
      <h1>Section 1</h1>
      <p>Welcome to FullPage Scroll</p>
    </div>
  </section>
  <section full-section>
    <div class="section-content">
      <h1>Section 2</h1>
      <p>Scroll down to see more</p>
    </div>
  </section>
</main>

import CreateFullPageScroll from 'fullpage-scroll';

const fullpage = CreateFullPageScroll({
  onBeforeLeave: async ({ currentSection, targetSection, resolve }) => {
    // Fade out current section
    currentSection.style.opacity = '0';
    await new Promise(r => setTimeout(r, 300));
    
    // Fade in target section
    targetSection.style.opacity = '1';
    resolve();
  }
});

API Reference

Configuration Options

interface FullPageScrollConfig {
  onBeforeLeave?: (params: BeforeLeaveParams) => void | Promise<void>;
}

interface BeforeLeaveParams {
  currentSection: HTMLElement;
  targetSection: HTMLElement;
  resolve: () => void;
}

Methods

• getCurrentSection(): HTMLElement - Get the current section element
• getCurrentIndex(): number - Get the current section index
• goToSection(index: number): void - Programmatically scroll to a section
• destroy(): void - Clean up event listeners

Examples

Basic Fade Transition

const fullpage = CreateFullPageScroll({
  onBeforeLeave: async ({ currentSection, targetSection, resolve }) => {
    currentSection.style.opacity = '0';
    await new Promise(r => setTimeout(r, 300));
    targetSection.style.opacity = '1';
    resolve();
  }
});

Slide Transition

const fullpage = CreateFullPageScroll({
  onBeforeLeave: async ({ currentSection, targetSection, resolve }) => {
    currentSection.style.transform = 'translateX(-100%)';
    currentSection.style.transition = 'transform 0.3s ease-out';
    
    await new Promise(r => setTimeout(r, 300));
    
    targetSection.style.transform = 'translateX(0)';
    targetSection.style.transition = 'transform 0.3s ease-in';
    
    resolve();
  }
});

Scale Transition

const fullpage = CreateFullPageScroll({
  onBeforeLeave: async ({ currentSection, targetSection, resolve }) => {
    currentSection.style.transform = 'scale(0.8)';
    currentSection.style.opacity = '0';
    
    await new Promise(r => setTimeout(r, 300));
    
    targetSection.style.transform = 'scale(1)';
    targetSection.style.opacity = '1';
    
    resolve();
  }
});

CSS Requirements

[full-page] {
  height: 100vh;
  overflow: hidden;
}

[full-section] {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.