Having more then one transition class

[egg-it]

Right now I'm trying to have more then one transition class call out.

I have
<main id="swup" class="transition-right"> and <main id="swup" class="transition-left">
both are in the same HTML body
and both have imgs within them I want to animate coming in at different ends of the screen. It works when I only have one transition being called out, but when i have both within my html it doesn't work.

Am I doing something wrong?

[daun]

There shouldn't be two main containers with an identical id attribute. You could try having main#left and div#right or similar and then see if that fixes it. If not, the best way to debug this is by creating an online sandbox that reproduces your issue. Feel free to use and fork this CodeSandbox template.

[egg-it]

ok so i could just call them out as
<main id="right" class="transition-right"> and <main id="left" class="transition-left">

and then just have my js be

const options = { containers: ["#right", "#left"] } const swup = new Swup();

Still doesn't seem to work only animates one coming in.

[egg-it]

now i got it to a point where it animates but the second animation gets stuck on the next page.

[daun]

Again, without a working example with HTML, JS and CSS, there's no way to tell what the actual problem is.