title: Messing around with Ember animate outlets
body: <p>I am messing around with phonegap and ember outlet animations and came across the problem that if you have a 5 tab view that sometimes the animation needs to be swipe left and other times swipe right. So I started writing out a solution that I thought <em>should</em> work.</p>
  
  <pre><code>App.ApplicationController = Ember.ArrayController.extend({
    currentView: 1, // views are 1-5
    actions: {
      goToFeed: function() {
        if(this.get('currentView') == 1) {
          // do nothing
        } else {
          this.transitionToAnimated('index', {main: 'slideRight'}, function() { return App.CARDS; });
        }
        this.set('currentView', 1);
      },
      goToTopTier: function() {
        if(this.get('currentView') == 2) {
          // do nothing
        } else if(this.get('currentView') &lt; 2) {
          this.transitionToAnimated('toptier', {main: 'slideRight'}, function() { return App.CARDS; });
        } else {
          this.transitionToAnimated('toptier', {main: 'slideLeft'}, function() { return App.CARDS; });
        }
        this.set('currentView', 2);
      },
      goToSchools: function() {
        if(this.get('currentView') == 3) {
          // do nothing
        } else if(this.get('currentView') &lt; 3) {
          this.transitionToAnimated('schools', {main: 'slideRight'}, function() { return App.CARDS; });
        } else {
          this.transitionToAnimated('schools', {main: 'slideLeft'}, function() { return App.CARDS; });
        }
        this.set('currentView', 3);
      },
      goToFriends: function() {
        if(this.get('currentView') == 4) {
          // do nothing
        } else if(this.get('currentView') &lt; 4) {
          this.transitionToAnimated('friends', {main: 'slideRight'}, function() { return App.CARDS; });
        } else {
          this.transitionToAnimated('friends', {main: 'slideLeft'}, function() { return App.CARDS; });
        }
        this.set('currentView', 4);
      },
      goToProfile: function() {
        if(this.get('currentView') == 4) {
          // do nothing
        } else {
          this.transitionToAnimated('index', {main: 'slideLeft'}, function() { return App.CARDS; });
        }
        this.set('currentView', 4);
      }
    }
  });
  </code></pre>
  
  <p>Reading through it, it makes sense to me but I get an error saying undefined is not a function. Looking at billysbilling's documentation I followed his instructions of <code>transitionToAnimated(name, animations, model)</code>.</p>
  
  <p>If i could just do a simple {{#if view &lt; somevalue}} then this would be perfect but we can't do that in ember.</p>
  
  <p>Any suggestions?</p>
  
  <p><strong>UPDATE</strong> <br></p>
  
  <p>So I figured why the function was recognized. It was because <code>this.transitionToAnimated</code> only works within <code>Ember.Route</code> when i was within an <code>Ember.ArrayController</code>. So I fixed that but I still get an error. I'll keep working at it but any help would be appreciated.</p>