Stack Overflow
Stack Overflow

Questions tagged [swup]

Complete, flexible, extensible, and easy to use page transition library for your web.

Swup is an extensible and easy-to-use page transition library for server-side rendered websites. It handles the complete lifecycle of a page visit by intercepting link clicks, loading the new page in the background, replacing the content and transitioning between the old and the new page.

Documentation • Plugins • Themes

Features

  • Auto-detects CSS transitions for perfect timing
  • Updates URLs and preserves native browser history behavior
  • Uses a cache to speed up subsequent page loads
  • Offers events for hooking into the lifecycle
  • Has a powerful plugin system and many official and third-party plugins
  • Provides ready-to-go themes to get started quickly
32 questions
4
votes
1 answer

Can I use swup with react js?

I'm trying to use swup js with React js. when I import swup and add const swup = new Swup(); It shows following error. How can I fix it. I added it like this import Swup from 'swup'; const swup = new Swup(); // export default function…
Kavishka
  • 231
  • 3
  • 11
3
votes
0 answers

SWUP changing CSS files and the effects on fade in animations (HeadPlugin)

Hi I encountered a problem with how the HeadPlugin is effecting animations and determined a work around and thought I'd post it here, in-case anybody is running into the same issue. Also all of this may be misinformed and I might be missing…
justaweeb
  • 31
  • 2
2
votes
0 answers

Swup page transitions

I'm playing around with Barba.js and Swup.js transition libraries in very stripped back form. I have the transitions working fine, but the hard-coded "is-active" class to highlight the menu buttons in the menu is now not working - I assume because…
StudioProjects
  • 139
  • 8
2
votes
0 answers

SWUP works on initial page load, fails on first request, and succeeds on every subsequent request?

I am using Swup.js with a Laravel project that also uses Livewire. I almost have it working right, but I'm getting a bizarre error. Here's the situation: The first page loads perfectly fine. Everything works as intended. Once you click a swup link…
Mark
  • 1,255
  • 1
  • 13
  • 25
2
votes
0 answers

Swup Change animation when clicking different buttons

I am trying to change the animation from the main-swup. For example when i'm clicking the first button, the animation between pages should change from left to right, when i'm clicking the the other button it should animate the other way. in…
Rienco
  • 21
  • 4
1
vote
1 answer

Adding or removing blocks in swup js

I have made transitions between pages using swupJS. The footer is not in the swup container, so it is not reloaded. I also have a 404 page which has no footer. The problem is that if the user goes to page 404 or to another page without a footer, it…
IIIu6ko
  • 25
  • 4
1
vote
2 answers

how to create an effect just before displaying a web page

hi i tested this piece of code found on stackoverflow here without success... I manage to use 'Swup' for the transitions but not for the arrival on the page * { -webkit-transition: all .5s; -webkit-animation-name: myfading; …
Anth0.0
  • 21
  • 6
1
vote
0 answers

Re-rendering React on each PJAX load

I will preface this by noting that I am using an Eleventy-esque project called Slinkity that enables React component capabilities and uses ReactDOM in the browser. Simplified project repo Here Live demo Here I am attempting to implement a PJAX…
kukihi
  • 23
  • 3
1
vote
1 answer

Swup with svg xlink

I can't get Swap to work with xlinks. I tried to create page transitions with Swup. Things work ok with normal tags, but inside svg I need to use . From Swup documentation I found that…
Oskari Lehtonen
  • 629
  • 5
  • 4
1
vote
1 answer

How to integrate AlpineJS into a website using Swup

I am trying to use Alpine (https://github.com/alpinejs/alpine) on my simple Swup (https://github.com/swup/swup) site. Currently I am attempting to implement a carousel using Siema (https://pawelgrzybek.github.io/siema/). On initial page load…
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42
1
vote
0 answers

Using Swup with Django

My Issue: I am trying to use Swup Library with Django's templating engine and everything worked well; except for the fetching of new content. The animations worked perfectly; I could see my contents getting faded out. The addresses in which the get…
Beelz
  • 67
  • 6
1
vote
0 answers

Can you target only links in navigation to make transition using swupjs?

Title of the question says it all, swupjs documentation said that you can target links with object like: const options = { linkSelector: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]),…
luka_dod
  • 11
  • 1
1
vote
1 answer

Flickity & Swup - destroying flickity

I am trying to destroy and re-load my Flickity slideshow while using Swup for page transitions, and I am not having much luck. This is my js file: import Swup from 'swup'; var Flickity = require('flickity'); function init() { if…
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42
1
vote
1 answer

Why Swup.js does not handle relative links?

I'm testing Swup.js As far as I see it doesn't work with relative links. Like this; Go page Screenshoot for link in DOM For this you need to enter the URL with the full path. But this may be undesirable. Relativity is used…
John Marti
  • 49
  • 5
1
vote
0 answers

Swup animations

I am using swup for page transitions but nothing ever happens for my specific website. I got it to work on a simple two-page HTML example website, but doing the exact same thing for my portfolio is not working. I have been trying to figure this out…
Kim Lachance
  • 53
  • 1
  • 6
1
2 3