Using BarbaJs for full page transitions

Kirby 3 Questions 🤔
1

Hi,
I am trying to use kirby in combination with barba.js and gsap to do some full page transitions and I am stuck with the problem that the “leaving” elements are being animated while the entering ones are not (the elements seem to be animated but there is not content shown and the new page appears abruptly (as normally :slight_smile: ) at the end of the animation.
Could there be anything that is preventing the new page content to be loaded/rendered?
Thank you!
paul

2

I’ve used Kirby and Barba together on many projects and never had any issues specific to Kirby. My guess is this is a Barba-related issue. How are your Barba wrapper and container set up? It’s best to keep the wrapper opening and closing tags in the header and footer snippets, and the container in the page template.

3

Thanks for the reply.
I have the body as wrapper and the container all inside the page template. Part of the content is coming from a snippet to which I am passing some data.

<body data-barba="wrapper">


    <main data-barba="container">
        <div style="background-image: url(<?= $currentImage ?>); 
    background-repeat: no-repeat; 
    background-size: cover;
    background-position-y: center;
    background-position-x: center">
            <?php snippet('MainInterface', [
                'currentImageIndex' => $currentImageIndex,
                'numberOfImages' => size($myImages)
            ]) ?>
        </div>
    </main>
    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://unpkg.com/@barba/prefetch"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

    <?= js('assets/js/myscript.js') ?>
</body>

And inside myscript.js:

barba.use(barbaPrefetch);

barba.init({
    transitions: [{
            name: 'wipe-left',
            sync: true,
            from: {
                custom: ({ trigger }) => {
                    return trigger.classList && trigger.classList.contains('button-right');
                },

            },
            leave(data) {
                return gsap.to(data.current.container, {
                    xPercent: -100
                });
            },
            enter(data) {
                return gsap.from(data.next.container, {
                    opacity: 0,
                    xPercent: 100
                });
            }
        }]
})

I have a very similar setup working outside of kirby, that is why I thought that kirby could be the culprit.