title: Angular router transition animations slide both left and right conditionally
body: <p>I have read this article about Router transition Animations for Angular:</p>
  
  <p><a href="https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8" rel="noreferrer">https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8</a></p>
  
  <p>And:</p>
  
  <p><a href="https://stackoverflow.com/questions/37909208/angular-2-slide-in-animation-of-a-routed-component">Angular 2 &quot;slide in animation&quot; of a routed component</a></p>
  
  <p>However, this is too static. I want it to slide left <strong>and</strong> right depending on the order of the tab.</p>
  
  <p>Is it possible to create router animations for this? Example of what I mean is below:</p>
  
  <p><a href="https://material.angular.io/components/tabs/examples" rel="noreferrer">https://material.angular.io/components/tabs/examples</a></p>
  
  <p>Look how it slides <strong>BOTH</strong> left <strong>and</strong> right very naturally depending on what tab you are on.</p>
  
  <p>This has to be dynamic, because the tabs will be added at runtime.</p>