Why does my sliding component toggle have a gap?

Question

Currently i have the component working like in the added .gif, with the yellow gap.

I need component 1 and 2 to move without gap. I cant figure out why the yellow background becomes visible during the animation.

If someone can point out what causes this it would be greatly appreciated.

Component1 and component 2 html & scss :

<div class="container">
  COMPONENT 
</div>

and the component-swap html & scss

<div class="container" [@slideAnimation]="swap_state">
  <app-component1 (click)="swap()"  *ngIf="swap_state === 'show_component1'"></app-component1>
  <app-component2 (click)="swap()" *ngIf="swap_state === 'show_component2'"></app-component2>
</div>

.container{
  display: flex;
  flex-direction: row;
  background: yellow;
  width: 100%;
  height: 100px;
  //padding: 10px;
  overflow: hidden;
}


app-component1{
  flex-shrink: 0;
  flex-grow: 1
}


app-component2{
  flex-shrink: 0;
  flex-grow: 1;
}

And this is my angular animation used:

export const horizontal_component_swap_animation =

  trigger('slideAnimation', [
  transition('show_component1 => show_component2', [
    group([
      // Animate component1 sliding out to the left
      query('app-component1', [
        animate('300ms linear', style({ transform: 'translateX(-100%)' }))
      ]),
      // Animate component2 sliding in from the right
      query('app-component2', [
        style({ transform: 'translateX(100%)' }),
        animate('300ms linear', style({ transform: 'translateX(0%)' }))
      ])
    ])
  ]),
  transition('show_component2 => show_component1', [
    group([
      // Reverse the animations for the opposite transition
      query('app-component1', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms linear', style({ transform: 'translateX(0%)' }))
      ]),
      query('app-component2', [
        animate('300ms linear', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ])
]);

Answer 1

The issue was that I assumed the starting x position of component2 was translateX(100%) because it started at the end of component1.

The starting point of both components is just translateX(0).