Multiple ember-animated beacons

something.hbs

<div class="grid-container">
  <div class="left-col">
    <h1>Customize the style of the {{@cardName}} Card</h1>
    <div class="display-wrapper">
      {{yield}}
    </div>
    <style id="card-styles"></style>
  </div>

  <div class="right-col">
    <div class="code-panel-heading">
      CSS Editor
      <Hint @beaconName="csshint">
          Edit the code below to add some styles! For example, type
          <code> font-size: 24px;</code>
          or
          <code>color: #0000FF;</code>
          inside some of the brackets, and see your Card update automatically.
      </Hint>
    </div>
    {{code-editor
      language="css"
      code=this.css
      onChange=(action (mut this.css))
      theme="vs-dark"
      onReady=(action "editorReady")
    }}
    <div class="code-panel-heading">
      HTML Viewer
      <Hint @beaconName="htmlhint">
          Use this to look up the classes and HTML elements you could write CSS styles for.
          If you need to make changes to this, visit the Card Builder page instead.
      </Hint>
    </div>
    {{code-editor
      language="html"
      code= this.markup
      theme="vs-dark"
      readOnly=true
    }}
  </div>
    <div style="position: absolute; top: 0; left: 0;">
  {{animated-orphans}}
</div>
</div>

something.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import scale from 'ember-animated/motions/scale';
import move from 'ember-animated/motions/move';


export default class HintComponent extends Component {
  @tracked showHint = false;
  

  @action
  toggleHint() {
    this.showHint = !this.showHint
  }

  * transition ({ insertedSprites, keptSprites, removedSprites, beacons }) {
    for (let sprite of insertedSprites) {
      let beaconName = sprite.element.dataset.beacon
      sprite.startAtSprite(beacons[beaconName]);
      move(sprite);
      scale(sprite);
    }

    for (let sprite of keptSprites) {
      move(sprite);
      scale(sprite);
    }

    for (let sprite of removedSprites) {
      let beaconName = sprite.element.dataset.beacon
      sprite.endAtSprite(beacons[beaconName]);
      move(sprite);
      scale(sprite);
    }
  }
}