ng-animate with javascript throwing Exeption errors when out animation is cancelled-Collection of common programming errors

angular.module('AppAnimations', [])
.animation('ecocool-in', ['$rootScope', function() {
    return {
        setup: function(element) {
            TweenMax.set(element, {opacity:0, right:'100px', width:'100%', position:'aboslute'})
            TweenMax.set($('body'), {overflow: 'hidden'})
        },
        start: function(element, done) {
            TweenMax.to(element, .6, {delay:.6,opacity:1, right:0, ease:Power2.easeOut, onComplete:function() {
                done();
                TweenMax.set(element, {opacity:1, right:0, width:'100%', position:'relative'})
                TweenMax.set($('body'), {overflow: 'scroll'})
            }})
        }
    }
}])
.animation('ecocool-out', ['$rootScope', function() {
    return {
        setup: function(element) {
            TweenMax.set(element, {width:'100%'})
        },
        start : function(element, done) {
            TweenMax.to(element, .6, {opacity:0, y:+100,ease:Power2.easeIn, onComplete:done})
        },
        cancel: function(element, done) {
            TweenMax.to(element, .5, {opacity:0, y:100, ease:Power2.easeIn, onComplete:done})
        }
    }
}])

When I run the website and I click a route it calls the ecocool-out animation and it plays fine. When I call the ecocool-in animation it plays fine.

the Cancel is only called when the animation is currently playing and another link is clicked.

When I do that, I get this:

[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/js/TweenMax.js :: p._onInitTween :: line 4045" data: no]


...r"),debug:function(){var c=e("debug");return function(){b&&c.apply(a,arguments)}...

angular.min.js (line 63)
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]


_cs = _getComputedStyle(target, "");

29
TweenMax.js (line 4045)

on Firefox.

and on safari I get this:

[Error] TypeError: 'undefined' is not an object (evaluating 'style.zIndex')
    _onInitTween (TweenMax.js, line 4049)
    _initProps (TweenMax.js, line 6091)
    _init (TweenMax.js, line 6050)
    render (TweenMax.js, line 208)
    render (TweenMax.js, line 5757)
    _updateRoot (TweenMax.js, line 5878)
    dispatchEvent (TweenMax.js, line 5246)
    _tick (TweenMax.js, line 5290)
  1. Do i need $rootScope? if this is a ng-view
  2. do I need to do something else with cancel? thats is where the errors are throwing.

any other suggestions or optimizations would help. thanks!