Parent animator changing position V2

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,
  
  things: null,
  
  init() {
  	this.set('things', this.makeItems(2));
    this.initialThings = [...this.things];
  },
  
  actions: {
  	activate(thing) {
      this.set('selectedThing', thing.id);
      
     	// mock a change in the list sorting
      if (thing.id % 2 === 0) {
      	this.set('things', this.get('things').sortBy('message'));
      } else {
      	this.set('things', this.get('things').sortBy('id'));
      }
    }
  },
  
  *transition({ keptSprites, duration }) {
		// console.log(arguments[0]);
  
  	for (let sprite of keptSprites) {
    	move(sprite, { duration, easing: easeInAndOut });
    }
	},
  
  // iconTransition: fade
	*iconTransition({ insertedSprites, keptSprites, removedSprites, duration }) {
		console.log(arguments[0]);
  	for (let sprite of insertedSprites) {
      // sprite.startTranslatedBy(20, 1);
      let x = sprite.absoluteFinalBounds.left + 100;
      let y = sprite.absoluteFinalBounds.top;
      sprite.startAtPixel({ x, y });
      console.log(sprite.element.offsetParent, sprite.finalBounds);
    	move(sprite, { duration, easing: easeInAndOut });
  		fadeIn(sprite, { duration });
    }
  
  	for (let sprite of removedSprites) {
    	// sprite.endTranslatedBy(20, null);
    	// move(sprite, { duration, easing: easeInAndOut });
  		fadeOut(sprite, { duration });
    }
	},
    
  makeItems(count = 5) {
    let result = Ember.A();
    for (let i = 0; i < count; i++) {
      result.push(makeRandomItem(i));
    }
    return (result);
  },
});

function makeRandomItem(index) {
  var messages = ["Z Dwight", "Y Stanley", "X Kelly", "W Ryan", "V Kevin"];
  var images = ['https://pbs.twimg.com/profile_images/549268771484229632/WnatiHzT_400x400.jpeg', 'https://pbs.twimg.com/profile_images/1839546020/florida_stanley_400x400.jpg', 'https://pbs.twimg.com/profile_images/71405458/2928282474_24807334d7_400x400.jpg', 'https://pbs.twimg.com/profile_images/740436182107049984/y0N8Sqbi_400x400.jpg', 'https://pbs.twimg.com/profile_images/118888142/Brian_Baumgartner_134198_400x400.jpg'];
  return { id: index, message: messages[index], image: images[index] };
  // Math.round(Math.random()*1000)
}

styles.app.css

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

.thing {
  width: 50vw;
  padding: 1rem;
  margin: 0.5rem 0;
  color: white;
	background: steelblue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
/*   overflow: hidden; */
}

.icon-container {
	position: relative;
  width: 50px;
}

.icons {

}

templates.application.hbs

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

<h1>Click the first item ⬇️</h1>
<p>Selected Thing ID: <code>{{selectedThing}}</code></p>

{{#animated-container}}
	{{#animated-each things key="id" use=transition duration=duration as |thing|}}
  <div class="thing" {{action 'activate' thing}}>
    
    <p>[{{thing.id}}] {{thing.message}}</p>
		
    {{#animated-container class="icon-container"}}
      {{#animated-if (eq thing.id selectedThing) use=iconTransition duration=duration}}
      	<div class="icons enabled">✅</div>
      {{else}}
      	<div class="icons disabled">❎</div>
      {{/animated-if}}
    {{/animated-container}}

	</div>
  {{/animated-each}}
{{/animated-container}}

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