Use of Parallel Plugin in Astro

[krishnaTORQUE]

Describe your problem 🧐

How to use parallel plugin in astro?

swup config in astro

swup({
            theme: "fade",
            globalInstance: true,
            preload: true,
            smoothScrolling: true,
            animateHistoryBrowsing: true,
            containers: ["#swup"],
            plugins: [new SwupParallelPlugin()],
        }),

html

<section>
            <main id="swup" class="transition-slide">
                <slot />
            </main>
        </section>

page

<a href="/about" data-swup-animation="right">Next</a>

What is your question? 🙋‍♀️

How to use parallel plugin in astro?

URL to minimal reproduction 🔗

None

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]

If you look at the readme, you'll find a section on parallel animations that should point you in the right direction.

[krishnaTORQUE]

@daun thanks
I made changes according to readme but still nothing.

parallel: true,
containers: ["main"],
parallel: ["main"],

[krishnaTORQUE]

Even I checked this code but unable to find the issue
https://replit.com/@philippdaun/Swup-Demo-Slideshow

[krishnaTORQUE]

What I am trying to do is fade all of the page but slide in parallel when needed.

[hirasso]

@krishnaTORQUE you‘ll need to take the time and create a minimal reproduction of your issue.

[krishnaTORQUE]

@krishnaTORQUE you‘ll need to take the time and create a minimal reproduction of your issue.

@hirasso sure
Here: https://github.com/krishnaTORQUE/swup-test

[hirasso]

Please follow the instructions found at https://docs.astro.build/en/guides/troubleshooting/#creating-minimal-reproductions
To create your reproduction on stackblitz.