Swup Change animation when clicking different buttons

Question

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 button it should animate the other way.

in index.html:

<main id="swup" class="transition-rtl">
        <h1>Home page here</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam blanditiis, dolor eligendi minus
            molestiae molestias natus necessitatibus obcaecati recusandae similique suscipit. Ab accusamus consequuntur
            corporis ducimus eveniet saepe voluptatum.</p>
        <a href="/vitters.com/subpage.html" id="swup-ltr" data-direction="ltr">Subpage LTR</a>
        <a href="/vitters.com/subpage.html" id="swup-rtl" data-direction="rtl">Subpage RTL</a>
    </main>

In main.js:

const options = {
    plugins: [new SwupBodyClassPlugin()],
    animateHistoryBrowsing: true
};

const swup = new Swup(options);

let scrollValues = {};

swup.on('clickLink', event=>{
    const direction = event.path[0].id;
    if(direction == 'ltr'){
        //now the new page should slide in from left
    } else{
        //the page should slide in from right
    }
})

style.css

.transition-ltr,
.transition-rtl{
  transition: .4s;
  opacity: 1;
}

.transition-ltr {
  transform: translateX(0);
  transform-origin: left;
}

.transition-rtl{
  transform: translateX(0);
  transform-origin: left;
}

html.is-animating .transition-rtl,
html.is-animating .transition-ltr
{
  opacity: 1;
  transform: translateX(100%);
}

html.is-leaving .transition-rtl,
html.is-leaving .transition-ltr
{
  opacity:0;
  transform: translateX(0);
}

Is there any way to change the class from #swup? Or is there any other way to change the animation?