omghax

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

export default Controller.extend({
  activeTab: 1,

  rules({ firstTime, newItem, oldItem }) {
    // Only animate on change, not on the initial value.
    if (firstTime) {
      return;

omghax

<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 rules=rules as |currentActiveTab|}}
  {{#if (eq currentActiveTab 1)}}
    <p>Panel 1</p>
  {{else if (eq currentActiveTab 2)}}

omghax

<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>

{{#if (eq activeTab 1)}}
  <p>Panel 1</p>
{{else if (eq activeTab 2)}}
  <p>Panel 2</p>

omghax

import Route from '@ember/routing/route';

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

omghax

import Controller from '@ember/controller';

export default Controller.extend({
  activeTab: 1
});

omghax

import Component from '@ember/component';
import { easeIn, easeInAndOut, easeOut } from 'ember-animated/easings/cosine';
import move from 'ember-animated/motions/move';

export default Component.extend({
  transition({ insertedSprites, keptSprites, removedSprites }) {
    // Removed sprites should exit to the right side of the window. We use
    // easeIn here so they start with no momentum and gradually speed up until
    // they leave the screen at top speed.
    removedSprites.forEach(sprite => {

omghax

{{#animated-each comments use=transition as |comment|}}
  <p>{{comment}}</p>
{{/animated-each}}

omghax

{{#each comments as |comment|}}
  <p>{{comment}}</p>
{{/each}}

omghax

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;
    }

omghax

import Ember from 'ember';
import move from 'ember-animated/motions/move';

export default Ember.Component.extend({
  transition({ insertedSprites, keptSprites, removedSprites }) {
    removedSprites.forEach(sprite => {
      sprite.endAtPixel({ x: window.innerWidth });
      move(sprite);
    });
    keptSprites.forEach(move);