Different transitions based on namespace

[btjackson11]

I am in the process of transitioning from v1 to v2 and have run into an issue creating separate transitions for when someone is moving from the home page to an interior page and vice-versa.

Here is how my transitions are setup:

barba.init({
    transitions: [
        {
            name: 'slidein-transition',
            from: 'home',
            to: 'interior',
            leave: function(data) {
                alert('slidein');
                var done = this.async();
                TweenMax.to(data.current.container, 1, {
                    opacity: 0,
                    onComplete: done
                });
            },
            enter: function(data) {
                var done = this.async();
                TweenMax.from(data.next.container, 1, {
                    opacity: 1,
                    onComplete: done
                });
            }
        }, {
                name: 'slideout-transition',
            from: 'interior',
            to: 'home',
            leave: function(data) {
                alert('slideout');
                var done = this.async();
                TweenMax.to(data.current.container, 1, {
                    opacity: 0,
                    onComplete: done
                });
            },
            enter: function(data) {
                var done = this.async();
                TweenMax.from(data.next.container, 1, {
                    opacity: 1,
                    onComplete: done
                });
            }
        }
    ]
});

However in this example when making a transition from the data-barba-namespace="home" container to the data-barba-namespace="interior" container and back they both use the 'slideout-transition'.

Is there something incorrect with how I have these transitions setup?

Thanks in advance!

[juliend2]

Did you try to use the namespace array for the to: (like shown in the demo) ?

   to: {
      namespace: [
        'home',
      ]
   }

[xavierfoucrier]

Hi @btjackson11,

Oh course you need to use the good syntax, highlighted by @juliend2 :wink:

You can find some examples in the documentation: https://barba.js.org/docs/v2/user/core.html#rules