How to setup Anime JS in a Ionic / Angular project?

Question

I love the animejs libary form: https://github.com/juliangarnier/anime It fast, clear and easy to implement, except in Ionic of a Angular project.

I've take a look to the post: anime.js not working in Ionic 3 project but, it doenst work for me.

The image (who I what to animate) doens't animate.

Does anybody has this working? And please share a solution?

What I've done so far:

1. Install animejs with npm: the package.json is updated with: "animejs": "^2.2.0"
2. Animejs is availible in the node_modules
3. With a custom copy-lib the anime.min.js is loaded in the index.html, see:

    const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
    module.exports = Object.assign(existingConfig, {
        copyFontawesomeFonts: {
          src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
          dest: '{{WWW}}/assets/fonts'
        },
        copyFontawesomeCss: {
          src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
          dest: '{{WWW}}/assets/css'
        },
        copyAnimeJS: {
          src: ['{{ROOT}}/node_modules/animejs/anime.min.js*'],
          dest: '{{WWW}}/assets/js'
        },
      }
    );

4. The index.html looks like:

   ...

     <!-- Font-awesome -->
     <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
   
     <!-- Anime JS -->
     <link href="assets/js/anime.min.js" rel="stylesheet"/>
   

   ...

5. The anime.min.js is available in the index.html

6. I import the amine in my login.ts file like:

   import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import * as anime from 'animejs'; ...

7. Load it in the constructor:

   anime({ targets: '#authImg', translateY: -50, elasticity: 800, duration: 2500, direction: 'alternate', easing: 'easeInOutCubic', loop: true });

8. Which have to animate the following html:

   <img src="assets/img/auth.png" alt="" id="authImg" />

9. But nothing happened...

Answer 1

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;
  }
}

Answer 2

If you are from 2020 import it like this

import anime from 'animejs/lib/anime.es';