How to use a different transitions for each page

[Rockfender]

Is it possible to use a different transition for each page ? this way a website is more attractive If so can you explain how to implement this?

[qiqiboy]

I think this should be work:

const swiper = new PageSwitch(...);

swiper.on('before', (next) => {
    const pageElem = swiper.pages[next];
    // Bind transition to each page element: <div class="page" data-transition="flip">...</page><div class="page" data-transition="scroll3d">...</page>
    const pageTransition = pageElem.getAttribute('data-transition');

   // Maybe we should reset/clear the conflicting styles
   // pageElem.style.cssText = '';

    swiper.setTransition(pageTransition);
})

[Rockfender]

I'm just a novice in coding and i'm eager to learn. Could you possible make a sample Codepen how to do this? I would be grateful and I hope you have the time for this

[Rockfender]

I accidentally closed this issue I hope you will make this codepen or a working demo page beneath your other demo's