Barba: Setting up own page transitions?????

[shanewmurphy]

I'm utterly frustrated by this plugin. It's fine if you just wanna use the defaults like Fade In & fade Out between page loads BUT what if you what to add your own transition, what if you want to use gsap or anime js with the Barba js? documentation for doing so is not included. I'd set up barba to using views to so that I could add my own transition between pages:

var Homepage = Barba.BaseView.extend({
namespace: 'homepage',
onEnter: function() {
// The new Container is ready and attached to the DOM.
ADD transition Here
},
onEnterCompleted: function() {
// The Transition has just finished.
},
onLeave: function() {
// A new Transition toward a new page has just started.
REMOVE TRANSITION DOESN"T WORK BEFORE GOING TO OTHER PAGE
},
onLeaveCompleted: function() {
// The Container has just been removed from the DOM.
}
});

// Don't forget to init the view!
Homepage.init();

[FistMeNaruto]

Did you really check the documentation?
http://barbajs.org/transition.html

[shanewmurphy]

Hi, @FistMeNaruto thanks for your reply. I finally fixed the issue & now anime js is creating my page transition along with Barba JS thankfully.

[Guaby]

@shanewmurphy can you give an example of how do you make it work?