//!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application.var ngModule = angular.module(‘YourApp‘, [‘ngAnimate‘]);ngModule.animation(‘.my-crazy-animation‘, function() {  return {    enter: function(element, done) {      //run the animation here and call done when the animation is complete      return function(cancelled) {        //this (optional) function will be called when the animation        //completes or when the animation is cancelled (the cancelled        //flag will be set to true if cancelled).      };    },    leave: function(element, done) { },    move: function(element, done) { },    //animation that can be triggered before the class is added    beforeAddClass: function(element, className, done) { },    //animation that can be triggered after the class is added    addClass: function(element, className, done) { },    //animation that can be triggered before the class is removed    beforeRemoveClass: function(element, className, done) { },    //animation that can be triggered after the class is removed    removeClass: function(element, className, done) { }  };});

angular.module(‘categories‘, [    ‘eggly.models.categories‘,    ‘ngAnimate‘])    .config(function ($stateProvider) {        $stateProvider            .state(‘eggly.categories‘, {                url: ‘/‘,                views: {                    ‘categories@‘: {                        controller: ‘CategoriesController‘,                        templateUrl: ‘app/categories/categories.tmpl.html‘                    },                    ‘bookmarks@‘: {                        controller: ‘BookmarksController‘,                        templateUrl: ‘app/categories/bookmarks/bookmarks.tmpl.html‘                    }                }            });    })    .controller(‘CategoriesController‘, function ($scope) {    })    .directive(‘menuItem‘, function(){        var controller = function($scope){            $scope.mouse_over = false;        };        return {            scope: true,            controller: controller        }    })    .animation(‘.menu-animation‘, function () {        return {            beforeAddClass: function (element, className, done) {                if (className == ‘highlight‘) {                    TweenLite.to(element, 0.2, {                        width: ‘223‘,                        borderLeft: ‘10px solid #89CD25‘,                        onComplete: done                    });                    TweenLite.to(element.find(‘a‘), 0.2, {                        color: "#89CD25"                    });                }                else {                    done();                }            },            beforeRemoveClass: function (element, className, done) {                if (className == ‘highlight‘) {                    TweenLite.to(element, 0.4, {                        width: ‘180‘,                        borderLeft: ‘5px solid #333‘,                        onComplete: done                    });                    TweenLite.to(element.find(‘a‘), 0.4, {                        color: "#5bc0de"                    });                }                else {                    done();                }            }        };    });

<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a><ul class="nav nav-sidebar">    <li menu-item ng-repeat="category in categories"        class="menu-animation"        ng-class="{‘highlight‘:mouse_over}"        ng-mouseenter="mouse_over = true"        ng-mouseleave="mouse_over = false"        ng-class="{‘active‘:isCurrentCategory(category)}">        <a  ng-click="setCurrentCategory(category)">            {{category.name}}        </a>    </li></ul>