Animate Element in Angular *ngFor Using Data Value

Question

Angular 12

I have a simple *ngFor, passing data to the inner element as follows:

<div *ngFor="let taskData of sequentialTasksData; let i = index; trackBy: trackByTaskIdChange"
     [@animateTop]="{ value: taskData.locationY, params: { initialValue: taskData.locationY } }"
     [style.width.px]="3 * taskColumnWidth"
     style="position: relative; margin: 16px;">

  <div
       [style.left.px]="taskData.locationX"
       [style.top.px]="taskData.locationY"
       [style.z-index]="getZIndex(taskData.task)"
       style="position: absolute;">
    <app-tasks-diagram-sequential-task-container [taskData]="taskData"></app-tasks-diagram-sequential-task-container>
  </div>

</div>

My code for the animateTop is as follows:

...
animations: [
  trigger('animateTop', [
    state('initial', style({ top: '{{initialValue}}px' }), { params: { initialValue: 0 } }),
    transition('* <=> *', animate('2000ms ease-out'))
  ])
]
...

I have used trackBy so that the data objects are not completely replaced. The code for this is as follows:

  public trackByTaskIdChange(index: number, taskData: TaskDataSequential): string {
    return taskData.task.id;
  }

I am trying to get the inner div to animate smoothly up and down as the locationY value changes but it always jumps to its next height. Can anyone offer any advice or suggestions please?