Simply icon slide animation

controllers.application.js

import Ember from 'ember';
// import fade from 'ember-animated/transitions/fade';
import move from 'ember-animated/motions/move';
import { fadeIn, fadeOut } from 'ember-animated/motions/opacity';
import { easeIn, easeOut, easeInAndOut } from 'ember-animated/easings/cosine';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  isThingActive: false,
  
  showThingActions: true,
  
  duration: 1000,
  
  actions: {
  	activate() {
    	this.toggleProperty('isThingActive');
    }
  },
  
//   *transition({ insertedSprites, removedSprites }) {
// 		console.log(arguments[0]);
  
//   	for (let sprite of insertedSprites) {
//     	move(sprite);
//     }
// 	},
  
  // iconTransition: fade
	*iconTransition({ insertedSprites, keptSprites, removedSprites }) {
		console.log(arguments[0]);
  	for (let sprite of insertedSprites.concat(keptSprites)) {
      console.log(sprite.initialBounds);
      sprite.startTranslatedBy(50, 0);
      console.log(sprite.initialBounds);
    	move(sprite, { easeInAndOut });
  		fadeIn(sprite);
    }
  
  	for (let sprite of removedSprites) {
      console.log(sprite.finalBounds);
      sprite.endTranslatedBy(50, 0);
      console.log(sprite.finalBounds);
      
    	move(sprite, { easeInAndOut });
  		fadeOut(sprite);
    }
	}
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.thing {
  width: 50vw;
  padding: 1rem;
  color: white;
	background: steelblue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 15rem;
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

/* .thing.is-active {
	top: 30rem;
}
 */

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

<div class="wrapper">
	{{!-- {{#animated-value isThingActive use=transition as |isActive|}} --}} 
  {{!-- {{/animated-value}} --}}
  <div class="thing {{if isThingActive 'is-active'}}" {{action 'activate'}}>
    
    <p>Some little thing (click me).</p>

    {{#animated-if isThingActive use=iconTransition duration=duration}}
    <div class="activeIcons">
      🔁✅
    </div>
    {{else}}
    <div class="activeIcons">
    	🛑❎
    </div>
    {{/animated-if}}

	</div>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-animated": "0.6.1",
    "ember-truth-helpers": "2.1.0"
  }
}