New Twiddle

controllers.index.js

import Ember from 'ember';
import { toLeft, toRight } from 'ember-animated/transitions/move-over';

export default Ember.Controller.extend({
  activeTab: 1,
  
  rules({ firstTime, newItems, oldItems }) {
    if (firstTime) {
      return;
    }
    return newItems[0] > oldItems[0] ? toLeft : toRight;
  },
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    activeTab: { replace: true }
  }
});

templates.index.hbs

<ul>
  <li>{{link-to 'Tab 1' (query-params activeTab=1)}}</li>
  <li>{{link-to 'Tab 2' (query-params activeTab=2)}}</li>
  <li>{{link-to 'Tab 3' (query-params activeTab=3)}}</li>
</ul>

{{#animated-value activeTab duration=400 rules=rules as |currentActiveTab|}}
  <div>
    {{#if (eq currentActiveTab 1)}}
      <h3>Panel 1</h3>
      <p>Lorem ipsum dolor amet pop-up franzen waistcoat, tattooed kinfolk prism stumptown roof party skateboard cold-pressed 90's tote bag. Truffaut mumblecore bushwick jianbing gluten-free blog. Af tumblr bitters, VHS salvia skateboard flexitarian retro twee etsy narwhal godard green juice. Single-origin coffee plaid quinoa offal poutine viral. Authentic schlitz asymmetrical brunch lo-fi. Hexagon gluten-free literally kogi franzen man braid you probably haven't heard of them yuccie meggings brunch 3 wolf moon bicycle rights artisan wayfarers.</p>
      <p>Schlitz sriracha narwhal green juice iPhone tote bag pork belly beard 8-bit vinyl wayfarers palo santo vegan food truck. Shoreditch gastropub raw denim man bun, pinterest tilde messenger bag bushwick. Ennui pitchfork williamsburg, poke lyft iPhone readymade gluten-free everyday carry kale chips listicle literally echo park etsy. Tilde glossier humblebrag fingerstache celiac drinking vinegar enamel pin. Man braid helvetica succulents whatever chia.</p>
    {{else if (eq currentActiveTab 2)}}
      <h3>Panel 2</h3>
      <p>Fixie intelligentsia authentic hell of umami, VHS echo park 3 wolf moon williamsburg tbh. Asymmetrical squid echo park cornhole lyft viral, tattooed pok pok paleo chillwave actually taxidermy. Trust fund cliche locavore sustainable tacos. Keytar four dollar toast ugh distillery flexitarian readymade gentrify iPhone slow-carb iceland banjo glossier mlkshk swag microdosing. Keytar tumeric four loko whatever listicle swag chia. Banjo umami green juice sustainable raw denim, bushwick plaid keffiyeh vegan jean shorts fanny pack poke paleo.</p>
    {{else if (eq currentActiveTab 3)}}
      <h3>Panel 3</h3>
      <p>Shoreditch vaporware YOLO semiotics kale chips letterpress. Next level live-edge subway tile intelligentsia affogato celiac la croix synth fashion axe art party blue bottle. Tousled literally activated charcoal shaman flexitarian. Jianbing pork belly shoreditch 8-bit, asymmetrical cliche scenester venmo mlkshk vexillologist tumeric palo santo kale chips vape live-edge. Vaporware pitchfork sustainable 90's flannel. Banh mi locavore seitan echo park lomo.</p>
      <p>Lomo vegan gochujang, woke sartorial microdosing typewriter umami quinoa keytar pickled. Ramps deep v chillwave chia four loko whatever. Tacos shabby chic paleo ennui knausgaard flannel small batch freegan. Offal man braid fingerstache cronut typewriter bespoke synth cardigan four loko pabst craft beer narwhal. Direct trade listicle godard gastropub chicharrones. Synth affogato flannel XOXO woke kitsch 8-bit, health goth gastropub. Tattooed poutine man bun gluten-free etsy jean shorts, wayfarers deep v fanny pack lo-fi enamel pin.</p>
      <p>Readymade pour-over photo booth, fam you probably haven't heard of them taiyaki whatever XOXO squid quinoa blue bottle church-key unicorn cronut. Fixie lo-fi synth mlkshk. Semiotics cray prism, venmo gentrify meggings waistcoat tattooed health goth small batch. Taxidermy umami bushwick, YOLO bicycle rights put a bird on it etsy schlitz synth. YOLO ennui polaroid, locavore swag tbh food truck asymmetrical copper mug blog.</p>
    {{/if}}
  </div>
{{/animated-value}}

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-animated": "0.3.0",
    "ember-data": "2.16.3",
    "ember-truth-helpers": "2.0.0"
  }
}