Two different animations for route changes

Question

I have the following case: I\'m using the ui-router for the routing in my AngularJS application. In one route, there are five child states for different subscreens. I want t

Answer 1

Similar attempt to @eddiec's accepted answer. Basically an array of the state name values and then the position in the array of the names of the toState and fromState values are compared to determine the direction.

.controller('viewCtrl', function ($scope) { 
    $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {

        // create an array of state names, in the order they will appear
        var states = ['state1', 'state2', 'state3'];

        if (states.indexOf(toState.name) < states.indexOf(fromState.name)) {
          $scope.back = true; 
        } 
        else {
         $scope.back = false;  
        }
    });
});

Codepen, forked from above, showing the working result. http://codepen.io/anon/pen/zBQERW