Animating UI Router views.

<!DOCTYPE html>
<html ng-app="app">
<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <nav class="top-bar" data-topbar role="navigation">
    <section class="top-bar-section">
      <ul class="left">
        <li><a href="#/foo">Route 1</a></li>
        <li><a href="#/bar">Route 2</a></li>
        <li><a href="#/baz">Route 3</a></li>
      </ul>
    </section>
  </nav>

  <div class="view-container">
    <div class="panel view-animation" ui-view></div>
  </div>

  <!-- vendor -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

  <!-- app -->
  <script src="app.js"></script>

</body>
</html>

.view-container {
  position: relative;
}

.view-animation {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

angular
  .module("app", ["ui.router", "ngAnimate"])
  .config(config)
  .animation(".view-animation", viewAnimation);

// Configure your routes here
function config($stateProvider, $urlRouterProvider) {
  
  $stateProvider
    .state("foo", {
      url: "/foo",
      template: "<h1>foo</h1>"
    })
    .state("bar", {
      url: "/bar",
      template: "<h1>bar</h1>"
    })
    .state("baz", {
      url: "/baz",
      template: "<h1>baz</h1>"
    });

  $urlRouterProvider.otherwise("/foo");
}

// Add your view change animations here
function viewAnimation() {

  var enterTimeline = new TimelineMax();
  var leaveTimeline = new TimelineMax();

  return {
    
    enter: function(element, done) {

      var topBar = angular.element(".top-bar");

      enterTimeline
        .clear()
        .set(element, { scale: 0.5, x: 100, autoAlpha: 0 })
        // .set(topBar, { yPercent: -100 })
        .to(topBar, 0.5, { yPercent: 0 })
        .to(element, 0.5, { scale: 1, x: 0, autoAlpha: 1, ease:Power1.easeInOut }, "-=0.1")
        .add(done);
    },
    
    leave: function(element, done) {
      
      leaveTimeline
        .clear()
        .to(element, 0.5, { x: 100, scale: 0.5, autoAlpha: 0, ease:Power1.easeInOut, delay: 0.1 })
        .add(done);
    }
  };
}