Угловые анимации: добавляем параметры в триггер шаблона

Итак, я создаю страницу профиля, и когда страница загружается, я хочу, чтобы 4 разных текстовых поля двигались в разных направлениях к их начальной точке (нижнее положение становится левым, левое становится верхним, ...)

Я мог бы сделать разные триггеры для каждого текстового поля, но это не похоже на лучшую практику. Я попытался добавить параметры к триггеру шаблона (см. Ниже), таким образом, я могу просто добавить левую и верхнюю позицию (все текстовые поля расположены абсолютно), не создавая новый триггер для каждого элемента.

Однако это дает мне ошибку, поэтому я должен использовать неправильный синтаксис. По этому поводу не так много документации. Кто-нибудь знает правильный синтаксис для этого? Потому что я осмотрелся и его трудно найти.

Ошибка, запятая неправильная.

Template parse errors:
Parser Error: Unexpected token , at column 24 in [{params: {left_pos: 50%, top_pos: 95%}}] in ng:///AppModule/FindLocalsComponent.html@43:19 ("ileSection__data">{{ focussedUser?.birthDate | age}}</h3>
              </div>
              <div [ERROR ->][@moveText] = "{params: {left_pos: 50%, top_pos: 95%}}" class = "header-box header-box--left">

Шаблон: я попробовал триггер (@moveText) в левом поле

<div class = "profileSection" [ngClass] = "{
      'visible': markerClicked,
      'not-visible': !markerClicked}
    ">
            <!--there should be a profile picture displayed here-->
            <!-- Other details that we want to display are conencted to the game, such details are currently unknown as we don't know more about the game-->
            <div class = "profileSection__header" *ngIf = "markerClicked">
              <img class = "profileSection__img" *ngIf = "!focussedUser?.profilePicture.uploaded" src = "assets/images/blank-profile-picture.png" alt = "no profile picture">
              <img class = "profileSection__img" *ngIf = "focussedUser?.profilePicture.uploaded" [src] = "'assets/images/profile-pictures/' + focussedUser?.profilePicture.name" alt = "the profile picture">
              <div class = "header-box header-box--top">
                <h3 class = "profileSection__data">{{ focussedUser?.username }}</h3>
              </div>
              <div class = "header-box header-box--right">
                <h3 class = "profileSection__data">Slytherin</h3>
              </div>
              <div class = "header-box header-box--bottom">
                <h3 class = "profileSection__data">{{ focussedUser?.birthDate | age}}</h3>
              </div>
              <div [@moveText] = "{params: {left_pos: 50%, top_pos: 95%}}" class = "header-box header-box--left">
                <h3 class = "profileSection__data">Speciality: Potions</h3>
              </div>
              <button class = "btn profileSection__btn profileSection__btn--first">Send PM</button>
              <button class = "btn profileSection__btn profileSection__btn--sec">Visit Profile</button>
            </div>

компонент

@Component({
    selector: 'find-locals',
    styleUrls: ['find-locals.component.css'],
    templateUrl: 'find-locals.component.html',
    animations: [
      trigger('moveText', [
        state('start', style({
          left: '{{ left_pos }}',
          top: '{{ top_pos }}'
        }), {params: {left_pos: 0, top_pos: 0}}),
        transition(':enter', [animate(2000)])
      ])
]
})

scss: так расположены текстовые блоки. Я сделал изображение ниже того, как он должен выглядеть после анимации. например, левое текстовое поле начинается с позиции и перемещается в назначенное место, когда начинается анимация

.header-box {
      display: block;
      position: absolute;
      width: 20%;
      word-wrap: break-word;
      text-align: center;

      &--top {
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
      }

      &--right {
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
      }

      &--bottom {
        top: 95%;
        left: 50%;
        transform: translateX(-50%);
      }

      &--left {
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
      }
    }

Правая часть экрана - это то место, где я хочу, чтобы анимация происходила. есть текст внизу, справа, слева и сверху.