anime.js not working in Ionic 3 project

Question

I am trying to use anime.js i my Ionic 3 project but whenever I use the function anime({}) in the .ts file it reports an error.

Error: Uncaught (in promise): TypeError: __webpack_require__.i(...) is not a 
function
TypeError: __webpack_require__.i(...) is not a function
at new AnimationPage (http://localhost:8100/build/main.js:56040:78)
at createClass (http://localhost:8100/build/main.js:11137:26)
at createDirectiveInstance (http://localhost:8100/build/main.js:10973:37)
at createViewNodes (http://localhost:8100/build/main.js:12323:49)
at createRootView (http://localhost:8100/build/main.js:12228:5)
at callWithDebugContext (http://localhost:8100/build/main.js:13359:42)
at Object.debugCreateRootView [as createRootView] 
(http://localhost:8100/build/main.js:12820:12)
at ComponentFactory_.create (http://localhost:8100/build/main.js:10164:46)
at ComponentFactoryBoundToModule.create 
(http://localhost:8100/build/main.js:3779:29)
at NavControllerBase._viewInit 
(http://localhost:8100/build/main.js:43786:44)
at c (http://localhost:8100/build/polyfills.js:3:12642)
at Object.reject (http://localhost:8100/build/polyfills.js:3:11998)
at NavControllerBase._fireError 
(http://localhost:8100/build/main.js:43544:16)
at NavControllerBase._failed (http://localhost:8100/build/main.js:43532:14)
at http://localhost:8100/build/main.js:43587:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:8488)
at Object.onInvoke (http://localhost:8100/build/main.js:4477:37)
at t.invoke (http://localhost:8100/build/polyfills.js:3:8428)
at r.run (http://localhost:8100/build/polyfills.js:3:3686)
at http://localhost:8100/build/polyfills.js:3:13183
Ionic Framework: 3.2.1
Ionic App Scripts: 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 7.4.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

my file animation.ts is :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';
import { anime } from 'animejs';
/**
 * Generated class for the AnimationPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-animation',
  templateUrl: 'animation.html',

})
export class AnimationPage {
    state: string ="small";
  constructor( public navCtrl: NavController, public navParams: NavParams) {
      anime({
        targets: '.animatable',
        translateX: 250
      });

  }


  animateThis(){
    this.state=(this.state=='small'?'large':'small');
  }






  ionViewDidLoad() {
    console.log('ionViewDidLoad AnimationPage');
  }

}

If there is any other file you need to sort this out please ask!

you mean this one? https://github.com/juliangarnier/anime how did you include it? — Suraj Rao, May 27 '17 at 13:01
yeah the one you mentioned. used this to include 'import { anime } from "animejs";' and I used npm to install — yash_DedSec, May 27 '17 at 13:03
when you include a js library in typescript, you need type declarations..that is what is missing..looks like they havent included it. Most libraries have them here: https://github.com/DefinitelyTyped/DefinitelyTyped — Suraj Rao, May 27 '17 at 13:05
you could raise an issue in animejs github for it or write your own... — Suraj Rao, May 27 '17 at 13:09

score 3 · Answer 1 · answered Apr 13 '19 at 20:11

I also had this problem, and fixed it by examining the tsconfig.json next to the typings in DefinitelyTyped (link).

What I was missing in my local tsconfig was "allowSyntheticDefaultImports": true. With that added, I could import in the same way as the DefinitelyTyped test, which uses:

import anime from 'animejs';

It then works to add animations like the following (with the expected type support):

anime({ targets: "#my-div", opacity: 0.5, duration: 1000 });

score 1 · Answer 2 · answered May 05 '19 at 01:17

After updating to anime.js 3.0.1 and @types/animejs 2.0.2, I got the same error and went for this workaround to be able to use the new 3.0.1 and keep my previous work:

animejs is still the same as when I used 2.2.0:

import * as anime from 'animejs';

and turn my calls from anime* to (anime).default*

For example it changes from:

anime({ targets: "#my-div", opacity: 0.5, duration: 1000 });

to:

(<any>anime).default({ targets: "#my-div", opacity: 0.5, duration: 1000 });

or to use its functions change from:

anime.random(0, 360) * Math.PI / 180;

to:

(<any>anime).default.random(0, 360) * Math.PI / 180;

Like I said, it's a workaround until @types/animejs is updated.

score 0 · Answer 3 · answered Jun 16 '17 at 18:01

0

try to import it like this:

import * as anime from 'animejs';

this works for me.

answered Jun 16 '17 at 18:01

Luis Güette

1

1

Thanks! for the help. I found its correct way It's `import anime from ../somepath/anime.js;` – yash_DedSec Jul 17 '17 at 10:27

score 0 · Answer 4 · answered Mar 25 '19 at 20:11

0

Seems that there some issues with animejs above 2.2.0 WITH with angular 7. Try to use the 2.2.0 version as stated here:

https://github.com/juliangarnier/anime/issues/527

answered Mar 25 '19 at 20:11

JFPicard

5,029
3
19
43

anime.js not working in Ionic 3 project

4 Answers4

Linked