How can I add animejs to the project?

sage
1

Hi,

I have tried to enqueue animejs to the theme, but I am not getting anywhere. I have tried both with npm install and bower install. I am not able to import anime from 'animejs' to the site, I do not want to use the manual option to add the script in the header or footer.php.

Could someone please help me solve this enqueue problem, I have added the overrides to my bower.jason

"dependencies": {
"bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-beta",
"popper.js": "^1.12.3",
"aos": "^2.2.0",
"animejs": "^2.2.0"
  },
  "overrides": {
    "animejs": {
      "main": [
        "./animejs/anime.js"
      ]
    }
  }

this also does not work, I have also tried to create a “vendor” folder in my assets directory and call the scripts in the main.js file, that too does not work.

My final aim is to enqueue the js file to my main.js and not have a seprate js file added.

Hope I am not confusing the community :weary:

2

bower install animejs

3

I have done bower install animejs i am getting undefined js error, it’s like the it’s not finding the js file :frowning:

4

Install Bower packages with bower install --save package-name. Using the --save flag will add the package into your project’s bower.json dependencies.

5

Thank you very much for the response :slight_smile:

I have tried using bower install --save animejs but this is the js error that I get “anime is not defined”

This is the code I am using in my main.js file

anime({
          targets: '#lineDrawing .lines path',
          strokeDashoffset: [anime.setDashoffset, 0],
          easing: 'easeInOutSine',
          duration: 1500,
          direction: 'alternate',
          loop: true
      });

I think it’s more than just bower install, in the documentation it says after bower install we have to import the animejs

import anime from 'animejs'

If I manually link my js file in the footer <script src="anime.min.js"></script> I do not get an error and the animation works, but that not how I want to enqueue my scripts.

Have I missed something out on this process?

6

Sage 8.x doesn’t support ES6 modules.

Using Bower overrides, you can pull in the compiled animejs file (similar to below) and disregard import statement from the animejs docs.

  {
    "name": "sage",
    "homepage": "https://roots.io/sage/",
    "authors": [
      "Ben Word <ben@benword.com>"
    ],
    "license": "MIT",
    "private": true,
    "dependencies": {
      "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-beta",
      "popper.js": "^1.12.3",
      "animejs": "^2.2.0"
    },
    "overrides": {
      "animejs": {
        "main": [
          "anime.min.js"
        ]
      }
    }
  }
2 Likes