function setEndWidth() {
  if(MatchMediaService.bp('sm')){
    return '300px';
  } else {
    return '580px';
  }
}

function setStartWidth() {
  if(MatchMediaService.bp('sm')){
    return '0px';
  } else {
    return '380px';
  }
}

@Component({
  moduleId: module.id,
  selector: 'menu-container',
  templateUrl: 'menu.html',
  styleUrls: ['./menu.scss'],
  animations: [
    trigger('goodmorning', [
      state('void', style({
        'width': '0',
        'transform': 'rotate(0)',
        'transform-origin': '0 0'
      })),
      state('harwood', style({
        'width': setEndWidth(),
        'transform': 'rotate(-30deg)',
        'transform-origin': '0 0'
      })),
      transition('void => *', animate(2000, keyframes([
        style({
          'width': '0',
          'transform': 'rotate(0)',
          'transform-origin': '0 0'
        }),
        style({
          'width': setStartWidth(),
          'transform': 'rotate(0)',
          'transform-origin': '0 0'
        }),
        style({
          'width': setEndWidth(),
          'transform': 'rotate(-30deg)',
          'transform-origin': '0 0'
        })
      ]))),
      transition('void => *', animate('2.5s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955)'))
    ])
  ]
})

<line-thing [@goodmorning]="'harwood'"></line-thing>