title: Angular 8 animation slide left and right like carousel
body: <p>I have a problem to create a sort of carousel with Angular animations. It is for a signing up form with different steps. When you go to the next step, it has to slide from the right, when you go back, it slides from the left.</p>
  <p>I didn't manage to create a plnkr example, impossible to import Angular animations, sorry.</p>
  <p>Here a basic code to give you an idea of what I'm looking for:</p>
  <pre><code>animations: [
  trigger('slideRight', [
    state('in', style({ transform: 'translateX(0%)' })),
    state('out', style({ transform: 'translateX(+100%)' })),
    transition('in &lt;=&gt; out', animate('200ms ease-in')),
    transition('out &lt;=&gt; in', animate('200ms ease-in-out'))
  ]),
  trigger('slideLeft', [
    state('in', style({ transform: 'translateX(0%)' })),
    state('out', style({ transform: 'translateX(-100%)' })),
    transition('in &lt;=&gt; out', animate('200ms ease-in')),
    transition('out &lt;=&gt; in', animate('200ms ease-in-out'))
  ])
  ]
  
  signingUpStep: 0;
  
  
  &lt;div&gt;
    &lt;div [hidden]=&quot;signingUpStep != 0&quot; [@slideLeft]=&quot;signingUpStep == 0 ? 'in' : 'out'&quot;&gt;
      &lt;div&gt;Step 0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div [hidden]=&quot;signingUpStep != 1&quot; [@slideRight]=&quot;signingUpStep == 1 ? 'in' : 'out'&quot;&gt;
      &lt;div&gt;Step 1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div [hidden]=&quot;signingUpStep != 2&quot; [@slideRight]=&quot;signingUpStep == 2 ? 'in' : 'out'&quot;&gt;
      &lt;div&gt;Step 2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My problem is with:</p>
  <pre><code>&lt;div [hidden]=&quot;signingUpStep != 1&quot; [@slideRight]=&quot;signingUpStep == 1 ? 'in' : 'out'&quot;&gt;
      &lt;div&gt;Step 1&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>It always uses [@slideRight] animation whereas I would like it to indeed use [@slideRight] when the user comes from signingUpStep == 0, but use [@slideLeft] when the user comes from signingUpStep == 2.</p>
  <p>Like the middle div signingUpStep == 1 was in the middle of a carousel.</p>
  <p>I read about :increment and :decrement but I'm not sure about how to use them.</p>
  <p>I also tried to used the params but it doesn't work like I want. I need to be able to dynamically change the params depending upon the user position in the slide.</p>
  <p>Thank you.</p>