36 questions
0
votes
0
answers
34
views
Hamburger Menu Issue After Adding swup NPM Package for Page Transitions
I installed swup NPM package to add some page transitions to my website. But now, after clicking a list item in the menu and navigating to the home page my hamburger menu only works once
I want the ...
0
votes
0
answers
76
views
SWUP, GIA, WordPress and Plugins
I've build a WordPress website that uses SWUP and GIA, All works fine except for when a plugin shortcode is on a page, namely the Smash Balloon Instagram Feed.
I have tried adding a component to the ...
0
votes
2
answers
179
views
How to restart Swiper js with active Swup?
There is the following script on the page that changes the content without reloading the page:
var swup = new Swup({
animationSelector: '[class*="swup-transition-"]'
});
On ...
0
votes
1
answer
76
views
how do I use the swup library on a template with these Laravel links?
I'm working on a project where the template has swup for page transitions. Using the template alone, everything works fine, but after adjusting my links with laravel, it doesn't work. Pages are always ...
- 19
0
votes
0
answers
157
views
Recommended practice for using layout.tsx (swup) as client component
I'm using App Router and looking for best practices for implementing a client component structure that is able to use swup page transitions and notify components when page content has changed.
My ...
3
votes
1
answer
825
views
Symfony UX Swup, Unknown "stimulus_controller" function
I'm using symfony 6.3 and I have installed symfony/ux-swup:
//bundles.php
<?php
return [
// ..............
Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
...
- 2,677
1
vote
1
answer
185
views
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 ...
- 25
0
votes
1
answer
243
views
Run script based on specific link clicked using Swup.js
I'm using video backgrounds throughout an app/kiosk we are building and trying to get specific scripts to run based on the target element that was clicked. Depending on the item clicked, videos are ...
- 49
0
votes
1
answer
261
views
Wordpress + Swup JS / Route plugin + path to regex
My URL structure is as follows:
http://localhost:8888/cdw/work/foo-bar/
http://localhost:8888/cdw/work/bar-foo/
http://localhost:8888/cdw/work/etc-etc/
I'm using swup JS and the route plugin https://...
- 11.1k
2
votes
0
answers
346
views
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 ...
- 139
0
votes
1
answer
837
views
Why does page content not change with Swup Transition?
I am trying just a simple project in which the pages have a transition using Swup (https://swup.js.org/getting-started/example), but I can't get it working.
If I click on the Link the URL is changing,...
- 1
1
vote
2
answers
76
views
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;
...
- 21
2
votes
0
answers
849
views
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. ...
- 1,376
0
votes
1
answer
519
views
Highlight current link with Swup.js
I use Swup for page transitions and was wondering how I could highlight the currently active link. Imagine I have a page structure like:
<nav>
<a href="/page-1">Page 1</a>...
- 329
1
vote
0
answers
143
views
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 ...
- 23
0
votes
1
answer
91
views
js not running for one of two identical html files
I have a website that by way of media query shows hamburger button when under so many px. When you click hamburger it shows vertically stacked menu options (pretty straight forward). I have an event ...
1
vote
1
answer
64
views
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 <a href="/secondpage.html"> tags, but inside svg I need to use <a ...
- 749
0
votes
2
answers
1k
views
Issue adding Google Tag Manager on my Wordpress website
I'm trying to add the Google Tag Manager scripts on my Wordpress website, custom theme with locomotivescroll.js and swup.js. Here is the code I use for the integration in functions.php:
/* Google Tag ...
- 53
0
votes
1
answer
423
views
Using Swup - reloading javascript on every file
I'm using PHP with Swup to refresh pages without refresh the whole site.
I'm using JavaScript function on every page (inside the body tag for exa) with functions that using ajax reguests every x ...
- 7
1
vote
1
answer
595
views
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://...
- 776
0
votes
0
answers
565
views
Forms and other component don't work with swup.js or barba.js
I'm currently coding a mobile app with a header and a footer common to all pages. I'm trying to add page transition to make the app smoother and avoid static reload each time an user move from one ...
- 121
4
votes
1
answer
2k
views
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 ...
- 251
1
vote
0
answers
191
views
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 ...
- 77
1
vote
0
answers
174
views
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 +
'&...
- 11
1
vote
1
answer
1k
views
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('...
- 776
1
vote
1
answer
607
views
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;
<a href="./page.html">Go page</a>
Screenshoot for link in DOM
For this you need to enter the ...
user15282525
2
votes
0
answers
364
views
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 ...
- 21
0
votes
1
answer
465
views
Swup.js + Oxygen (wp) - Not loading correct site?
I'm trying to implement Swup.js into a site in Oxygen for Wordpress. For some reason, the correct version of the site is not loaded when I use Swup.
For some reason, the correct version of the site is ...
3
votes
0
answers
273
views
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 ...
- 31
0
votes
1
answer
186
views
How do I transition a hero video between two pages using Swup.js without the video restarting on page change
I am having trouble transitioning a hero video between two pages using Swup.js.
Currently I can transition the video element using a custom class called 'transition-wipe' which changes the width of ...
- 13
0
votes
1
answer
609
views
Swup JS stuck on "pageLoaded" state
Hello I am trying to make use of this awesome plugin "Swup JS".
When I run the code from their site the plugin runs perfectly.
When I try to add it in my website it stuck in the state "...
- 1
1
vote
0
answers
944
views
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 ...
- 53
0
votes
1
answer
308
views
Using multiple Swup plugins
I am using the Swup library to implement page transitions which is working great but I need to use 2 plugins (Scripts and Body Class). I must be missing something because I cannot get both to work, ...
0
votes
1
answer
253
views
SWUP JS external function call
this is my first time using swup js with the js plugin. https://swup.js.org/plugins/js-plugin
I can see that the trigger to go to the clicked page lies inside the object array of options.
My question ...
1
vote
2
answers
2k
views
How to transition to top of the page with swup js
Using Swup JS I achieved a nice transition effect which works fine except for one issue.
If I scroll down to a certain point on page "A", hit the url to transition to page "B", I ...
- 149
0
votes
1
answer
209
views
Initialize and use Swup in Meteor js
I am trying to use swup in meteor js framework.
I added the script tag that contains unpkg link for swup in main.html and initialized Swup in Meteor.startup function of main.js.
But when i run the app,...
- 611