How to setup Anime JS in a Ionic / Angular project?
I think you don't have to link assets/js/anime.min.js
to your index.html neither copy js with ionic app script.
Just import anime.js as follows:
import * as anime from 'animejs';
Then make sure you are setting your animation once the view is loaded (in ionViewDidLoad
for example.
I've just run this example and it works fine:
Example.ts:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import * as anime from 'animejs';
@Component({
selector: 'page-example',
templateUrl: 'example.html',
})
export class ExamplePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
anime({
targets: '#cssSelector .el',
translateX: 250
});
}
}
Example.html:
<ion-header>
<ion-navbar>
<ion-title>Example</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="cssSelector">
<div class="line">
<div class="square el"></div>
</div>
</div>
</ion-content>
example.scss:
page-example {
.square, .circle {
pointer-events: none;
position: relative;
width: 28px;
height: 28px;
margin: 1px;
background-color: currentColor;
font-size: 12px;
}
}