swup/swup

Features

• Single-Page Navigators - Provides a system to intercept navigation and replace content to simulate a single-page application experience.
• Page Transition Animations - Swaps page content using CSS transitions or JavaScript animations to create a seamless navigation experience.
• AJAX Content Swapping - Intercepts navigation to replace DOM containers via asynchronous requests to simulate a single-page application experience.
• Partial Page Swapping - Swaps specific DOM containers with new content during navigation to avoid reloading the entire page.
• Transition Lifecycle Hooks - Executes a sequence of asynchronous hooks and plugins at defined stages of the page transition lifecycle.
• Plugin-Based Extensibility - Implements an architectural pattern that allows adding specialized behaviors and animation effects via custom plugins.
• History API Navigators - Uses the browser's History API to track and retrieve navigation data, including redirects, during page swaps.
• Page Transition Libraries - Provides a comprehensive library for creating seamless animated transitions between pages on server-rendered websites.
• AJAX Page Loaders - Fetches new page content via AJAX and updates the DOM without requiring a full browser reload.
• Browser History Management - Synchronizes application state with the browser history API to maintain native navigation behavior.
• History State Updaters - Synchronizes the browser URL and history stack to ensure native back and forward buttons trigger transitions.
• Browser History Navigations - Provides programmatic control over how back and forward button events trigger page transitions and animations.
• Page Transition Hooks - Provides a hook-based lifecycle system to execute custom asynchronous logic during page transitions.
• Document Head Management - Synchronizes head tags, metadata, and stylesheets between pages to maintain consistent document state during transitions.
• Document Head Synchronization - Synchronizes head tag contents and HTML attributes between transitions to keep document metadata current.
• DOM Content Orchestration - Swaps specific HTML containers and synchronizes document head metadata without performing a full page reload.
• DOM Morphing - Updates the inner content of elements without replacing the node to preserve scroll position and state.
• Page-Specific Script Execution - Executes custom initialization and cleanup scripts in the head or body after a page transition.
• Client-Side Navigation Management - Programmatically manages view transitions and browser history to replace page content dynamically.
• Server-Rendered Transition Enhancements - Creates seamless visual transitions between server-rendered pages to simulate a single-page application.
• Programmatic Transition Functions - Executes custom animation functions for page transitions using route patterns or attributes instead of CSS.
• Web Page Output Caching - Stores previously fetched HTML content in memory to accelerate navigation and reduce redundant network requests.
• Morphing Page Caches - Stores previously visited pages in memory to enable instant restoration and DOM morphing.
• Just-in-Time Page Prefetches - Reduces perceived load time by prefetching page content in the background via hover or visibility triggers.
• Transition Triggers - Tracks history entries to decide if a navigation should use an animated transition or a standard page reload.
• Screen Reader Optimizations - Optimizes screen reader experience by managing focus and announcing page changes during dynamic content swaps.
• Cross-Page Element Persistence - Transfers specific DOM elements and event listeners from one page to the next to maintain state.
• Animation Completion Coordination - Ensures page content updates only after outgoing and incoming animations have fully completed.
• Page Transition Styling - Assigns specific animation styles to links or containers to change the visual transition between pages.
• Parallel DOM Rendering - Retains previous page content in the DOM to run incoming and outgoing animations simultaneously.
• Perceived Performance Optimizations - Reduces perceived load times through techniques like background preloading of linked pages and memory caching.
• Predefined Animation Effects - Provides a collection of pre-configured animation plugins to implement polished page transitions without manual styling.
• Navigation Scroll Resets - Resets scroll position after navigation while supporting anchor links to maintain standard browser behavior.
• Scroll Behavior Control - Implements advanced control over how the window scrolls during page transitions, including smooth animations.
• Scroll Restoration - Tracks and restores the vertical scroll position and anchor focus when navigating between pages.
• Scroll Position Maintenance - Manages and maintains the scroll offset during transitions and anchor jumps for a consistent user experience.
• View Transitions - Integrates with the native browser View Transitions API to create smooth screen navigation effects.
• History Entry Replacements - Controls whether a page transition creates a new history entry or replaces the current one.
• Dynamic Fragment Updates - Replaces specific DOM elements instead of the entire page based on the route to maintain state.
• DOM Content Morphing - Updates the content of specific elements without replacing the DOM node to preserve container scroll positions.
• Parallel Container Rendering - Maintains both the outgoing and incoming page containers in the DOM simultaneously to enable overlapping animations.
• Event Delegation - Attaches global listeners to the document to intercept link clicks and trigger dynamic page transitions.
• Transition-Aware Submissions - Serializes and submits forms while maintaining animated page transitions for a seamless experience.
• Navigation State Tracking - Tracks navigation metadata, including source and destination URLs, to ensure consistent browser history behavior.
• Transition Exclusions - Allows preventing specific links or containers from triggering the page load lifecycle using custom attributes.
• Transition Link Filtering - Allows defining which elements trigger page transitions and excluding specific URLs from the dynamic loading logic.
• Programmatic Navigation - Provides APIs to programmatically trigger page transitions with custom animations and caching options.
• Client-Side URL Rewriters - Transforms URLs on the client side before fetching to map paths to specific resources or prevent reloads.
• Animation Libraries - Flexible page transition library for web projects.

Star history