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="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/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 class="container">
        <div class="row panel">
          <div class="panel-heading gsapify-router" ui-view="heading"></div>
          <div class="panel-body flex-row gsapify-router" ui-view="body"></div>
          <div class="panel-footer text-center">What I want is to animate the complete panel, but only <b>ui-view</b> elements are animated</div>
        </div>
        <!-- /panel -->
      </div>
      <!-- /container -->
    </div>
  </body>

</html>

// Code goes here
(function() {

  'use strict';

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

      $locationProvider.html5Mode(true);

      // 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: {
            'heading@': {
              template: '<b>Numbers</b>'
            },
            'body@': {
              template: '<mp-option ng-repeat="option in vm.options track by option.state" option="option"></mp-option>',
              controller: 'NumCtrl',
              controllerAs: 'vm'
            }
          }
        })
        .state('num.one', {
          url: '/one',
          views: {
            'heading@': {
              template: '<b>One</b>'
            },
            'body@': {
              template: '<mp-option ng-repeat="option in vm.options track by option.state" option="option"></mp-option>',
              controller: 'OneCtrl',
              controllerAs: 'vm'
            }
          }
        })
        .state('num.two', {
          url: '/two',
          views: {
            'heading@': {
              template: '<b>Two</b>'
            },
            'body@': {
              template: '<mp-option ng-repeat="option in vm.options track by option.state" option="option"></mp-option>',
              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.options = [{
        state: 'num.one',
        text: 'One'
      }, {
        state: 'num.two',
        text: 'Two'
      }];

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

      var vm = this;

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

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

      var vm = this;

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

    }])

})();

/* 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;
}