Skipped out animation when using Parallel Plugin

[ercovi]

Hi there!

My theme is working good and I've have transitions working but I noticed that out function inside SwupJsPlugin animations never fire and now I'd need to do something inside it!

I'm working with Astro and here's the versions i'm using:

    "@swup/a11y-plugin": "^4.4.2",
    "@swup/astro": "^1.3.2",
    "@swup/body-class-plugin": "^3.1.2",
    "@swup/debug-plugin": "^4.0.4",
    "@swup/head-plugin": "^2.1.2",
    "@swup/js-plugin": "^3.1.1",
    "@swup/parallel-plugin": "^0.2.0",
    "@swup/preload-plugin": "^3.2.7",
    "@swup/scripts-plugin": "^2.0.0",
    "@swup/scroll-plugin": "^3.3.1",
    "astro": "^3.4.0",

Does anyone experienced the same?

Here's my code:

const swup = new Swup({
  containers: ['main'],
  plugins: [
    new SwupPreloadPlugin(),
            new SwupA11yPlugin(),
            new SwupBodyClassPlugin(),
            new SwupDebugPlugin(),
            new SwupHeadPlugin(),
            new SwupScriptsPlugin(),
    new SwupParallelPlugin({ containers: ['main'] }),
    new SwupJSPlugin({
      animations: [
        {
          from: '(.*)',
          to: '(.*)',
          out: (done) => {
                console.log('outttt')
                done()
                console.log('testing')
            },
          in: async () => {
            const next = document.querySelector('main');
            const prev = document.querySelector('main + main');
            await Promise.all([
                    gsap.set(intro, {
                        scale: 0,
                        opacity: 1,
                    }),
                    gsap.to(intro, {
                        scale: 1,
                        duration: 0.8,
                        ease: "power4.in",
                    }),
                    resetScroll(),
                ]);
          }
        }
      ]
    })
  ]
})

Many thanks :)

[hirasso]

Hi @ercovi

ParallelPlugin will always skip the out-animation. What exactly are you trying to do? If you want to execute some custom logic as soon as a visit starts, you could make use of the visit:start hook:

const swup = new Swup({
  // ...
});

swup.hooks.on("visit:start", (visit) => {
  // execute custom logic every time a visit starts
});

Hope this helps. You can read more about hooks in the docs.