1. Origine
Swup est né d'un constat simple : les sites multi-pages rechargent entièrement le navigateur à chaque clic, ce qui crée une rupture visuelle que les frameworks SPA comme React ont appris à supprimer. Georgy Marchuk a créé Swup pour offrir cette même fluidité sans migrer tout un projet vers un framework JavaScript. Le pari était de rester simple, léger, et compatible avec n'importe quel site existant. Un pari réussi qui nous a convaincus de l'intégrer dans notre stack.
2. Utilité
Sans Swup, chaque clic sur un lien recharge entièrement le navigateur. C'est discret, mais ça se ressent : un flash, une interruption, une perte de contexte visuel.
Swup intercepte ces clics et remplace le rechargement par une transition animée, ce qui donne l'impression de naviguer dans une application plutôt que de sauter de page en page.
Pour nos clients, le résultat est immédiatement perceptible : le site semble plus soigné, et hérite tout de suite d'un effet premium.
3. Fonctionnalités
Ce qui rend Swup solide, c'est ce qu'il prend en charge sans que tu aies à y penser : mise à jour des balises meta, réinitialisation des scripts tiers, gestion du scroll. Les animations, elles, restent entièrement entre tes mains, CSS ou GSAP, simples ou complexes.
- Animations de transition en CSS pur ou pilotées via GSAP
- Transitions différentes selon les pages
- Préchargement des pages au survol
@swup/scripts-pluginpour relancer les scripts et interactions Webflow après chaque transition (couvre la majorité des cas ; les interactions complexes ou basées sur GSAP peuvent nécessiter une réinitialisation manuelle dans les hooks Swup)- Support du scroll en haut de page via plugin
- Progress bar de navigation configurable
4. Cas concrets
Sur un site vitrine avec une home très animée, on intègre Swup pour que la transition vers les pages intérieures ne rompe pas l'expérience. Le visiteur reste dans le même élan visuel, sans rechargement visible.
Sur un portfolio créatif, les transitions personnalisées renforcent l'identité de marque. Swup gère la réinitialisation des animations GSAP après chaque changement de page, ce qui évite les bugs courants liés aux interactions Webflow.
C'est d'ailleurs le cas du site que tu lis en ce moment ! Notre site est bien évidemment construit sur Webflow et intègre Swup pour la navigation. Les transitions entre les pages font partie du design, elles ne sont pas qu'un simple ajout superficiel.
5. Prix
Swup est entièrement gratuit et open-source, publié sous licence MIT. Il n'y a aucun coût, aucune dépendance commerciale, et aucun risque de changement de modèle tarifaire. La librairie est disponible librement sur npm et GitHub, maintenue activement avec une communauté de contributeurs réguliers.
→ Documentation officielle : swup.js.org
6. Questions fréquentes
Swup a-t-il un impact sur le SEO ?
Non. Chaque URL reste un document HTML complet, indexé normalement par Google. Swup n'entre en jeu qu'après le premier chargement, côté navigateur : le moteur de recherche ne voit rien de différent.
Les interactions Webflow fonctionnent-elles après une transition ?
Oui, dans la majorité des cas, à condition de les réinitialiser via le plugin officiel. Pour les interactions complexes ou basées sur GSAP/Finsweet, une réinitialisation manuelle dans les hooks Swup peut être nécessaire.
Pourquoi Swup plutôt que Barba.js ?
Pour la majorité des projets Webflow, Swup est plus rapide à intégrer, plus léger (~10 kb gzippé vs ~20 kb pour Barba.js), et largement suffisant. Barba.js devient pertinent si tu as besoin de transitions radicalement différentes selon chaque paire de pages, des cas rares en production.
Swup fonctionne-t-il avec Finsweet Attributes ?
Oui, mais les attributs Finsweet doivent être réinitialisés manuellement dans un hook page:view Swup après chaque transition. Ce n'est pas automatique, mais c'est documenté et reproductible en quelques lignes.
