Barba: Enter transition not showing

[S1SYPHOS]

The problem

Whenever trying to transition to another page, the enter transition isn't shown (latest barba.js version) - I'm currently using the sample code from #498, which seems to run fine in their codepen.

Description

Expected behaviour

The page should fade out, the next should fade in

Actual behaviour

.. instead, this happens:

Code To Reproduce Issue [ Good To Have ]

function leaveAnimation(e) {
    return new Promise(async resolve => {
        var target = e.querySelectorAll('main');

        anime( {
            targets: target,
            opacity: [1, 0],
            duration: 500,
            easing: 'linear',
            complete: () => {
                resolve();
            },
        });
    });
}

function enterAnimation(e) {
    return new Promise(async resolve => {
        var target = e.querySelectorAll('main');

        anime( {
            targets: target,
            opacity: [0, 1],
            duration: 500,
            easing: 'linear',
            complete: () => {
                resolve();
            },
        });
    });
}

// .. and then:

barba.init({
    debug: true,
    transitions: [ {
        name: 'broken-transition',
        sync: false,
        once: ({ next }) => enterAnimation(next.container),
        leave: ({ current }) => leaveAnimation(current.container),
        enter: ({ next }) => enterAnimation(next.container)
    }],
});

Steps to reproduce issue [ Good To Have ]

Install anime.js and paste above code.

---

Environment

• Barba version that exhibits the issue:
• Build used:
  
  
  
  • [ ] module (esm/)
  
  
  • [x] browser (dist/)
  
  
  • [ ] main (lib/)
  
  
• Browser OS/version used:

[xavierfoucrier]

Hi @S1SYPHOS,

This issue is more related to how your code is running than Barba v2 implementation...

For those kind of questions/help, please use the Slack workspace in order to ask the whole community for support. Join using the invite link here: https://barba.js.org/docs/getstarted/useful-links/#Developer

Anyway, here are some fix you should do in your code:

• sync mode must be placed below debug: true as it is part of the main Barba properties
• remove useless async keyword before resolve, see how to write a Promise here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Hope this help :wink:
I am closing the issue.

[S1SYPHOS]

Right, the async was a leftover from some example code and not responsible for the behavior by itself, but I appreciate your kind help.

[xavierfoucrier]

In addition, latest anime.js version support Promise, so you don't need to encapsulate your code inside a Promise, just use anime(... inside your animation methods.

[S1SYPHOS]

Well, after playing a little, this works the way I intended it:

barba.init({
    debug: true,
    transitions: [{
        leave: (data) => {
            return new Promise(resolve => {
                anime({
                    targets: data.current.container,
                    opacity: 0,
                    complete: () => {
                        resolve();
                    }
                });
            });
        },
        enter: (data) => {
            anime({
                targets: data.next.container,
                opacity: [0, 1],
            });
        },
    }]
});

.. not returning a Promise on the second one.

[xavierfoucrier]

@S1SYPHOS exactly what I was meaning/thinking in my previous comment, you can write hooks in many ways, see https://barba.js.org/docs/advanced/hooks/#Base-hooks.

I updated my comment as I wrote it late at night on my phone :smile: