Page transitions with barba.js

barba.js

// BARBA.JS INIT and Page transitions

var ExpandTransition = Barba.BaseTransition.extend({

  start: function() {
    Promise
      .all([this.newContainerLoading, this.zoom()])
      .then(this.showNewPage.bind(this));
  },

  // function is hide old container and all elements in it
  zoom: function() {
    

	var deferred = Barba.Utils.deferred();
    var tlBar = new TimelineMax();

    tlBar.fromTo('.logo', 1, {opacity: 1, x: 0}, {opacity: 0, x: 50});

    tlBar.fromTo(".img", 1, {opacity: 1, x: 0}, {opacity: 0, x: 50});


    tlBar.fromTo($(this.oldContainer), 0.5, {opacity: 1}, {opacity: 0, ease: Power3.easeInOut, onComplete: function(){
	    deferred.resolve();	
    }});

    return deferred.promise;
  },

  // function is show old container and all elements in it

  showNewPage: function() {
  	var deferred = Barba.Utils.deferred();

  	var tlBar2 = new TimelineMax();

    tlBar2.fromTo($(this.newContainer), 0.5, {opacity: 0}, {opacity: 1, ease: Power3.easeInOut, onComplete: function(){
	    deferred.resolve();	
    }});

    tlBar2.fromTo(".img", 1, {opacity: 0, x: 50}, {opacity: 1, x: 0});

    tlBar2.fromTo('.logo', 1, {opacity: 0, x: 50}, {opacity: 1, x: 0});


    this.done();
  }
});

Barba.Pjax.getTransition = function() {
  var transitionObj = ExpandTransition;

  //Barba.HistoryManager.prevStatus().namespace 
  return transitionObj;
};

// init barba.js
Barba.Pjax.start();