Combine Parallel Plugin + JS Plugin + GSAP

[andresclua]

Describe your problem 🧐

A few weeks ago, I inquired about the possibility of combining the Parallel plugin with the JS Plugin. Fortunately, @daun noticed my query and recommended checking out this post: https://github.com/orgs/swup/discussions/799.

I attempted to set it up, but I couldn't get it to work. Currently, my page simply refreshes when navigating to another page.

Swup js Instance

 this.swup = new Swup({
            linkSelector: "a[href]:not([href$='.pdf']), area[href], svg a[*|href]",
            containers: ['main'],
            plugins: [
                
                new SwupHeadPlugin({ persistAssets: true }),
                new SwupScriptsPlugin({
                    head: true,
                    body: true,
                }),
                new SwupDebugPlugin({
                    globalInstance: true,
                }),
                new SwupJsPlugin(transition),
                new SwupParallelPlugin({
                    keep: 1 
                }),
            ],
        });
    ```
    
    
    Transitions
    ``` 
    
    import gsap from 'gsap';
export const transition = [{
    from: '(.*)',
    to: '(.*)',
    out: (next, infos) => {
      gsap.to('#swup', { opacity: 0, duration: .25 ,onComplete: next });
    },
    in: async () => {
      const next = document.querySelector('main');
      const prev = document.querySelector('main + main');
      await Promise.all([
        gsap.fromTo(next, { opacity: 0, x: '100%' }, { opacity: 1, x: '0%', duration: 0.3 }).finished,
        gsap.fromTo(prev, { opacity: 1, x: '0%' }, { opacity: 0, x: '-100%', duration: 0.3 }).finished
      ]);
    }
  }];

What is your question? 🙋‍♀️

I want to have a minimal starter version only with JS Plugin and Parallel Plugin.

URL to minimal reproduction 🔗

https://paralell--axa-future.netlify.app/

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

You're using the selector main, but there's no main element on your page. There's only a div with the class of main. Changing the selector from main to .main should do the trick.

[daun]

To help with future debugging, try enabling the "Preserve log" function of your browser's dev tools console. This will keep any errors and debug output even if the page reloads, allowing you to catch the error in your example code.