Problem with animate.js /JS Modul /Live Preview

[bsphil]

Hi guys, I’m currently trying out anime.js.

And honestly? I’m already failing at integrating the script.

I’m doing something wrong.

It only works for me if I export it (minify it) and upload it to a server.

But I’d like to have it in the live preview of BS.

Is it the ES6 module?

I’ve already tried using the module import function… but that doesn’t work either.

[catkin]

Hello @bsphil,

Thanks for all this info. I have got V4 (the latest version) running in Bootstrap Studio’s live preview.

There are several versions of the JS files, and each one has a different purpose. This did confuse me for a while till I understood what each does.

Here is how I setup Anime.js.

Install

1. I chose the external JS option and imported the following file by URL:
   https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js

2. I did not select “JavaScript Module”

Demo Setup

1. I added a div to my index.html page like this:

<div class="anime-box"></div>

2. I then styled the element with CSS in my styles.css file like this:

.anime-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  margin: 100px auto;
  border-radius: 8px;
}

3. Finally I created a JS file called index.js, although the name chosen is not relevant to get it to work. In this file I added my animation code for my test I created this simple animation:

document.addEventListener("DOMContentLoaded", () => {
  // pull out the animate function from the global `anime`
  const { animate } = anime;

  // selector first, options second:
  animate('.anime-box', {
    translateX: 250,
    duration: 2000,
    alternate: true,
    ease: 'inOutQuad',
    loop: true
  });
});

4. Finally I tested this and my animation worked!
   

Your Setup

1. First follow the steps in my demo example on how to import the correct JS file for Anime.js
2. Create your Divs
3. Add your CSS styles and then for the animations replace your animation.js file with the following:

document.addEventListener("DOMContentLoaded", () => {
  // pull out the animate function from the global `anime`
  const { animate } = anime;

  // selector first, options second:
    animate('.square', {
      translateX: '23rem',
      rotate: 90,
      loop: true,
      duration: 4000,
      easing: 'inOutExpo',
    });

    animate(['.blue', '.green'], {
      translateX: '13rem',
      rotate: 90,
      borderRadius: '8px',
      duration: 2000,
      loop: true
    });
});

4. Your animations should now run, I setup some of my own styles just to test and got this result:
   

Hope this helps!

[bsphil]

OHHH YESSSSSS

thx a lot, thanks to your detailed and good explanation, I found a mistake in my thinking.

great work

@catkin

document.addEventListener("DOMContentLoaded", () => {
  // pull out the animate function from the global `anime`
  const { animate } = anime;

[catkin]

Glad to have helped!