animation tweak

src/app/components/process-header/add.animation.ts

@@ -1,30 +1,8 @@
-import {
-  trigger,
-  transition,
-  stagger,
-  animate,
-  style,
-  query
-} from '@angular/animations';
+import { trigger, transition, animate, style } from '@angular/animations';
 
 export const addAnimation = trigger('add', [
-  transition(':enter, * => 0, * => -1', []),
-  transition('* => *', [
-    // each time the binding value changes
-    query(':enter', [style({ opacity: 0, transform: 'translateX(200%)' })], {
-      optional: true
-    }),
-    query(
-      ':enter',
-      [
-        stagger(20, [
-          animate(
-            '0.3s ease-out',
-            style({ opacity: 1, transform: 'translateX(0%)' })
-          )
-        ])
-      ],
-      { optional: true }
-    )
+  transition(':enter', [
+    style({ opacity: 0, transform: 'translateX(200%)' }),
+    animate('0.3s ease-out', style({ opacity: 1, transform: 'translateX(0%)' }))
   ])
 ]);

src/app/components/process-header/process-header.component.html

@@ -1,11 +1,12 @@
 <div class="grid-container pt-19">
   <div class="align-left pt-3">
-    <div class="process-grid-container ml-5" [@add]="processes">
+    <div class="process-grid-container ml-5">
       <app-process-tab
         style="display: inline-block;"
         *ngFor="let process of processes"
         [process]="process"
         [processes]="processes"
+        [@add]="process"
       ></app-process-tab>
     </div>
   </div>