Transition Page (Barba)

_common.sass

body
	background: #252627
	line-height: 1.4
.barba-container
	transition: all 1s ease-in-out	
#nav-bar
	height: 100vh
	width: 60px
	position: fixed
	left: 0
	top: 0
	background: #000
	color: #fff
	display: block
	z-index: 3
	a
		color: #fff
		font-size: 20px	
		text-align: center
		margin: 20px auto
		display: block
#page
	position: fixed
	left: 60px
	top: 0
	right: 0
	bottom: 0
	background: #252627		
	z-index: 2
	color: #fff
	padding: 30px
	display: -webkit-flex
	display: -moz-flex
	display: -ms-flex
	display: -o-flex
	display: flex
	flex-direction: column
	justify-content: center
	h1
		span
			min-width: 5px
			display: inline-block
			cursor: default
			transition: all .1s ease-in-out
			&:hover
				color: #08fdd8
	img
		width: 100%
		display: block	
#loader
	position: fixed
	left: 0
	top: 0
	right: 0
	bottom: 0
	background: #252627
	z-index: 2
	display: none
	text-align: center
	h4
		text-align: center
		margin: auto
		color: #fff
		font-size: 34px
	.progressbar
		position: absolute
		left: calc( 50% - 22.5% )
		top: 60%
		width: 45%
		height: 1px
		background: #047765
		.line
			position: absolute
			left: 0
			top: 0
			height: 1px
			background: #08fdd8

barba.js

import Barba from 'barba.js';
import {TimeLineMax} from 'gsap';


let tl = new TimelineMax();

var LoadTransition = Barba.BaseTransition.extend({
  start: function() {
    Promise
      .all([this.newContainerLoading, this.effectLoad()])
      .then(this.showNewPage.bind(this));
  },
  effectLoad: function() {
   	tl.to('#page' ,0.3, {scale: 0.9 , opacity: 0.5,ease: Power3.easeNone});
    tl.fromTo('#loader' ,0.7, {x: '-100%'}, {x: '0%',display: 'flex', ease: Power3.easeNone});
    tl.fromTo('#loader .line' , 1, {width: 0},{width: '100%', ease: Power0.easeNone});
  },
  showNewPage: function() {
  	var _this = this;
    var $el = $(this.newContainer);
    tl.fromTo($el, 0.5,{opacity: 0},{opacity: 1, onComplete: function() {
	  _this.done();
  	}});
  }

});
Barba.Pjax.getTransition = function() {
  var transitionObj = LoadTransition;
  return transitionObj;
};
Barba.Pjax.start();

page.jade

---
title: Index Page
---
extends layouts/_layout
block content
	#nav-bar
		a(href="page.html") Home
		a(href="1.html") 1
		a(href="2.html") 2
		a(href="3.html") 3	
	#barba-wrapper 
		.barba-container 
			#page
				h1.blast
					| Hi, i am Sergiy,
					br
					| web developer.
			#loader
				h4 Page loading...
				.progressbar
					.line

lastClicked.parentElement

parentElement - find parent element.