More than one animation at the same time

[Daniel]

Is this possible? I tried it but doesn't work properly

[Fabian Leutgeb]

Yes, you can animate multiple elements at the same time. Can you explain where you are having issues?

[Daniel]

I've got this template:

<div class="ball-container">
  <div class="ball" *ngFor="ball in balls"></div>
</div>

What I'm doing right now is a loop and every time I'm running a different animation on each ball:

const ball = <HTMLElement>document.getElementsByClassName('ball-container')[index];
this.animator.setType('rubberBand').animate(ball);

But if I want all of them I'd need to remove the [index] but it doesn't work.

------------- Scenario 2 --------------
I've got 2 elements coming one from the left and the other one from the right (in order):

this.animator.setType('slideInLeft').show(this.startCtnDOM.nativeElement).then(() => {
      this.animator.setType('slideInRight').show(this.keyboardDOM.nativeElement);
});

Let's say that I want both animations at the same time:

this.animator.setType('slideInLeft').show(this.startCtnDOM.nativeElement);
this.animator.setType('slideInRight').show(this.keyboardDOM.nativeElement);

The first one is going to take the setType of the second one and both of them are going to be animated with slideInRight

[Fabian Leutgeb]

For the first scenario, this is currently not possible with css-animator, as exactly one element needs to be passed. Lists of elements are not supported, however, you can simply loop over the elements to trigger an animation for each.

For the second scenario you will have to use two instances of the animator, by creating them manually:

import { AnimationBuilder } from 'css-animator/builder';

The following could go in the constructor:

this.leftAnimator = new AnimationBuilder();
this.reftAnimator.setType('slideInLeft');

this.leftAnimator = new AnimationBuilder();
this.rightAnimator.setType('slideInRight');

Now you can safely animate different types simultaneously:

this.leftAnimator.show(this.startCtnDOM.nativeElement);
this.rightAnimator.show(this.keyboardDOM.nativeElement);

[Daniel]

Perfect, working as a charm.

Thanks!