animejs in angular is not animating

Question

I am trying to use animejs in Angular4 project. I have been looking for some hint and clue online how to proceed with this, but there is barely nothing anywhere.

So I am trying to move box along x coordinates...

animejs-logo.component.ts file:

import { Component, OnInit } from '@angular/core';
import anime from 'animejs';

@Component({
  selector: 'app-animejs-logo',
  templateUrl: './animejs-logo.component.html',
  styleUrls: ['./animejs-logo.component.scss']
})
export class AnimejsLogoComponent {
  animation = anime({
    targets: ['.box'],
    translateX: [
      { value: 500, duration: 1000 },
      { value: 0, duration: 1000 }
    ],
    duration: 2000,
    loop: true
  });

  animate() {
    console.log('play');
    this.animation.play();
  }
}

animejs-logo.component.scss:

.box {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 4px;
}
.red { background-color: #f00; }
.green { background-color: #0f0; }
.blue { background-color: #00f; }

animejs-logo.component.html:

<div class="container">
    <button (click)="animate()">Play</button>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</div>

As you can see, there is nothing special or incredible. First try with the animejs... Can please someone explain me what I am doing wrong? Why it doesn't fire up? I am not having any errors in console, project's compiling.

Answer 1

OK, solved.

Issue was that I defined anime objects in wrong moment of lifecycle... It turned out that all elements must be rendered and after that one can define animations. So, all definitions are in the ngAfterViewInit e.g.:

ngAfterViewInit() {
    this.square = anime({
        targets: '#animation_1 .animate',
        translateX: [
            { value: 250, duration: 1000 },
            { value: 0, duration: 1000 }
        ],
        duration: 2000,
        loop: false,
        autoplay: false
   });
}