awesome-repositories.com
Blog
awesome-repositories.com

Descubre los mejores repositorios open-source con nuestra búsqueda potenciada por IA.

ExplorarBúsquedas curadasAlternativas open-sourceSoftware autohospedableBlogMapa del sitio
ProyectoAcerca deCómo clasificamosPrensaServidor MCP
Aviso legalPrivacidadTérminos
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
swup avatar

swup/swup

0
View on GitHub↗
5,191 estrellas·198 forks·TypeScript·MIT·9 vistasswup.js.org↗

Swup

Swup es una librería de transición de página y cargador de páginas AJAX diseñado para crear transiciones animadas y fluidas entre páginas en sitios web renderizados por el servidor. Funciona como un orquestador de contenido DOM y gestor de historial del navegador, interceptando la navegación para reemplazar el contenido de la página dinámicamente y simular una experiencia de aplicación de una sola página.

El proyecto se diferencia mediante un sistema de ciclo de vida basado en hooks y una arquitectura de plugins que permite la inyección de lógica personalizada y efectos de animación. Soporta métodos visuales avanzados incluyendo el morphing de contenido DOM, renderizado DOM paralelo para animaciones superpuestas e integración con la API nativa de View Transitions del navegador.

La librería cubre una amplia gama de capacidades, incluyendo la gestión de navegación del lado del cliente, caché de páginas basada en memoria y precarga de páginas en segundo plano para optimizar el rendimiento. También proporciona una restauración completa de la posición de desplazamiento, optimizaciones de accesibilidad para lectores de pantalla y herramientas para sincronizar metadatos de cabecera de documento y ejecución de scripts a través de transiciones.

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.

Historial de estrellas

Gráfico del historial de estrellas de swup/swupGráfico del historial de estrellas de swup/swup

Búsqueda con IA

Explora más repositorios increíbles

Describe lo que necesitas en lenguaje sencillo: la IA clasifica miles de proyectos open-source curados por relevancia.

Start searching with AI

Alternativas open-source a Swup

Proyectos open-source similares, clasificados según cuántas características comparten con Swup.
  • miguel-perez/smoothstate.jsAvatar de miguel-perez

    miguel-perez/smoothState.js

    4,377Ver en GitHub↗

    smoothState.js is an AJAX navigation manager and jQuery page transition library designed to create seamless transitions between pages by loading remote content asynchronously. It functions as a browser history state manager that attaches custom serializable data to history entries and handles URL redirects without requiring full browser refreshes. The library includes a client-side page cache that stores previously visited pages in memory for instant reloading. It further reduces perceived load times through a content prefetching system that initiates network requests when a user hovers over

    CSS
    Ver en GitHub↗4,377
  • barbajs/barbaAvatar de barbajs

    barbajs/barba

    12,940Ver en GitHub↗

    Barba is a JavaScript page transition library that intercepts browser navigation to swap page content and animate transitions without a full page refresh. It functions as an AJAX page loader and client-side navigation manager, coordinating the lifecycle of transitions through hooks and custom logic during view changes. The library distinguishes itself as a frontend animation orchestrator that triggers specific visual effects and scripts based on the source and destination of a website page. It employs a rules-based system to resolve which specific animation or transition to execute by matchin

    TypeScript
    Ver en GitHub↗12,940
  • vuejs/routerAvatar de vuejs

    vuejs/router

    4,638Ver en GitHub↗

    Vue.js Client-Side Router is a routing library for Vue.js that synchronizes the browser URL with application state to enable single-page application navigation. It functions as a URL-to-component mapper, rendering specific components based on the current URL path and dynamic route patterns. The project serves as a browser history manager that controls how internal routes map to the browser URL using various history strategies. It also provides a navigation guard framework to execute logic and access control during route transitions. The library covers dynamic route management, programmatic U

    TypeScriptvuevue-router
    Ver en GitHub↗4,638
  • vuejs/vue-routerAvatar de vuejs

    vuejs/vue-router

    18,898Ver en GitHub↗

    Vue.js Client-Side Router is a routing library that maps browser URLs to Vue.js components to enable the creation of single-page applications. It functions as a navigation engine that manages browser history and URL state to allow page transitions without full browser reloads. The system utilizes a nested route manager to render hierarchical views that match complex URL structures. It includes navigation guard middleware to intercept, validate, or redirect route transitions before components are rendered. A client-side history handler synchronizes application state with the browser URL using

    JavaScript
    Ver en GitHub↗18,898
Ver las 30 alternativas a Swup→

Preguntas frecuentes

¿Qué hace swup/swup?

Swup es una librería de transición de página y cargador de páginas AJAX diseñado para crear transiciones animadas y fluidas entre páginas en sitios web renderizados por el servidor. Funciona como un orquestador de contenido DOM y gestor de historial del navegador, interceptando la navegación para reemplazar el contenido de la página dinámicamente y simular una experiencia de aplicación de una sola página.

¿Cuáles son las características principales de swup/swup?

Las características principales de swup/swup son: Single-Page Navigators, Page Transition Animations, AJAX Content Swapping, Partial Page Swapping, Transition Lifecycle Hooks, Plugin-Based Extensibility, History API Navigators, Page Transition Libraries.

¿Qué alternativas de código abierto existen para swup/swup?

Las alternativas de código abierto para swup/swup incluyen: miguel-perez/smoothstate.js — smoothState.js is an AJAX navigation manager and jQuery page transition library designed to create seamless… barbajs/barba — Barba is a JavaScript page transition library that intercepts browser navigation to swap page content and animate… vuejs/router — Vue.js Client-Side Router is a routing library for Vue.js that synchronizes the browser URL with application state to… vuejs/vue-router — Vue.js Client-Side Router is a routing library that maps browser URLs to Vue.js components to enable the creation of… hotwired/turbo — Hotwire Turbo is a server-driven navigation and HTML streaming framework that intercepts link clicks and form… inertiajs/inertia — Inertia is a server-driven frontend framework designed to create monolithic single page applications. It acts as a…