This is a demostration of gsapify router animation

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script src="https://cdn.rawgit.com/homerjam/angular-gsapify-router/master/angular-gsapify-router.js"></script>
    <script src="script.js"></script>
    
    <base href="/">
  </head>

  <body ng-app="example">
    
    <h1 class="text-center">Angular gsapify router animation</h1>
    
    <div class="vertical-center">
      <div ui-view="panel" class="gsapify-router container"></div>
    </div>

  </body>

</html>

// Code goes here
(function() {

  'use strict';

  angular.module('example', ['ui.router', 'hj.gsapifyRouter'])
  
    .config(function($locationProvider, $urlRouterProvider, $stateProvider, gsapifyRouterProvider) {

      $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
      });

      // Set default transitions to use if unspecified
      gsapifyRouterProvider.defaults = {

        enter: 'fade',

        leave: 'fade'

      };

      // Enable transition on initial load
      // gsapifyRouterProvider.initialTransitionEnabled = true; // defaults to false

      $stateProvider
        .state('num', {
          url: '/',
          views: {
            panel: {
              templateUrl: 'template.html',
              controller: 'NumCtrl',
              controllerAs: 'vm'
            }
          }
        })
        .state('one', {
          url: '/one',
          views: {
            panel: {
              templateUrl: 'template.html',
              controller: 'OneCtrl',
              controllerAs: 'vm'
            }
          }
        })
        .state('two', {
          url: '/two',
          views: {
            panel: {
              templateUrl: 'template.html',
              controller: 'TwoCtrl',
              controllerAs: 'vm'
            }
          }
        });

      $urlRouterProvider.otherwise('/');

    })
    .directive('mpOption', function() {

      return {
        restrict: 'E',
        template: '<a class="text-center" ui-sref="{{ option.state }}"><i class="fa fa-sort-numeric-asc fa-5x"></i><div class="text-center"><p>{{ option.text }}</p></div></a>',
        scope: {
          option: '=option'
        },
        replace: true
      }
    })
    .controller('NumCtrl', [function() {

      var vm = this;
      
      vm.heading = 'Numbers';

      vm.options = [{
        state: 'one',
        text: 'One'
      }, {
        state: 'two',
        text: 'Two'
      }];

    }])
    .controller('OneCtrl', [function() {

      var vm = this;
      
      vm.heading = 'One';

      vm.options = [{
        state: 'num',
        text: 'Back'
      }];

    }])
    .controller('TwoCtrl', [function() {

      var vm = this;
      
      vm.heading = 'Two';

      vm.options = [{
        state: 'num',
        text: 'Back'
      }];

    }])
    
    .run(function($templateCache) {
      $templateCache.put('template.html', '' +
        '<div class="row panel">' +
        ' <div class="panel-heading"><b>{{vm.heading}}</b></div>' +
        '   <div class="panel-body flex-row">' +
        '     <mp-option ng-repeat="option in vm.options track by option.state" option="option"></mp-option>' +
        ' </div>' +
        '<div class="panel-footer text-center">{{vm.footer}}</div>' +
      '</div>');
    });

})();

/* Styles go here */

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  min-width: 100%;
  /* Fallback for vh unit */
  min-width: 100vh;
  width: 100%;
}

.flex-column {
  min-height: 100%;
  /* Fallback for vh unit */
  min-height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  /* Align the bootstrap's container vertically */
  /*-webkit-box-align : center;*/
  /*-webkit-align-items : center;*/
  /*-moz-box-align : center;*/
  /*-ms-flex-align : center;*/
  /*align-items : center;*/
  /* In legacy web browsers such as Firefox 9
       we need to specify the width of the flex container */
  width: 100%;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.vertical-center {
  min-height: calc(100% - 65px);
  /* Fallback for vh unit */
  min-height: calc(100vh - 65px);
  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  /* Align the bootstrap's container vertically */
  /*-webkit-box-align : center;*/
  /*-webkit-align-items : center;*/
  /*-moz-box-align : center;*/
  /*-ms-flex-align : center;*/
  /*align-items : center;*/
  /* In legacy web browsers such as Firefox 9
       we need to specify the width of the flex container */
  width: 100%;
  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
       hence the bootstrap's container won't be aligned to the center anymore.

       Therefore, we should use the following declarations to get it centered again */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.gsapify-router-in-setup {
    display: none;
}
.container {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}