AngularJS Example

HTML

<div ng-app="myApp" ng-controller='MainController'>
        <button ng-click="toggle = !toggle">Toggle!</button>

      <div class="box on" ng-show="toggle" ng-animate="{leave:'list-out', enter:'list-in', move:'list-move'}">On</div>
      <div class="box off" ng-hide="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">Off</div>

</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.angularjs.org/1.1.4/angular.min.js"></script> <style> 

    .box { color: white; text-align: center; height: 100px; font-size: 86px; }
    .on  { background-color: green; }
    .off { background-color: red; }

JavaScript

var myApp = angular.module('myApp', ['AppAnimations']);

angular.module('AppAnimations', [])
      .animation('list-out',function($window) {
        return {
          start : function(element, done) {
            console.log('list-out');
            TweenMax.set(element, {position:'relative'});

            var duration = 1; 
            //we can use onComplete:done with TweenMax, but lets use
            //a delay value for testing purposes
            TweenMax.to(element, 1, {opacity:0, width:0});
            $window.setTimeout(done, duration * 1000);
          }
        };
      }).animation('list-in',function($window) {
        return {
          setup: function(element) {
            TweenMax.set(element, {opacity:0, width:0});
          },
          start : function(element, done) {
            console.log('list-in');
            var duration = 1; 
            //we can use onComplete:done with TweenMax, but lets use
            //a delay value for testing purposes
            TweenMax.to(element, duration, {opacity:1, width:210});
            $window.setTimeout(done, duration * 1000);
          }
        };
      });

      myApp.controller('MainController', function($scope) {
          $scope.toggle = true;
        });