Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation Not Running on Site Load

See original GitHub issue

Issue

The animation doesn’t work on my Personal Site when it works on CodePen. I have tried using webpack and such, but have not gotten the almost identical code, to work. The only things I really changed are formatting, as well. Here listed below, is my HTML, JS, and CSS.

Code

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Movement Animation</title>

    <meta content="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" type="text/css" href="theme.css" />
  </head>

  <body>
    <script src="index.js"></script>

    <div class="container">
      <div class="bar bar1"></div>
      <div class="ball"></div>
      <div class="bar bar2"></div>
    </div>
  </body>
</html>

JS

import anime from 'animejs';
import $ from "jquery";

var loop = true;
var easing = 'linear';
var direction = 'alternate';

anime({
  targets: '.ball',
  translateX: 470,
  translateY: 100,
  easing,
  loop,
  direction,
  background: [
    { value: '#573796' },
    { value: '#FB89FB' },
    { value: '#FBF38C' },
    { value: '#18FF92' },
    { value: '#5A87FF' }
  ]
})
var ballTimeline = anime.timeline({
  loop,
  direction
})
var bar2Timeline = anime.timeline({
  loop,
  direction
})
var bar1Timeline = anime.timeline({
  loop,
  direction
})
ballTimeline
  .add({
    targets: '.ball',
    translateY: 100,
    translateX: 470,
    easing
  }).add({
    targets: '.ball',
    translateY: 0,
    translateX: 0,
    easing
  }).add({
    targets: '.ball',
    translateY: '-80',
    translateX: 470,
    easing
  })
bar2Timeline
  .add({
    targets: '.bar2',
    translateY: 100,
    easing,
    background: '#573796'
  }).add({
    targets: '.bar2',
    translateY: 0,
    easing,
    background: '#FB89FB'
  }).add({
    targets: '.bar2',
    translateY: '-100',
    easing,
    background: '#FBF38C'
  })
bar1Timeline
  .add({
    targets: '.bar1',
    translateY: '-80',
    easing,
    background: '#18FF92'
  }).add({
    targets: '.bar1',
    translateY: 10,
    easing,
    background: '#5A87FF'
  }).add({
    targets: '.bar1',
    translateY: 60,
    easing,
    background: '#FF1461'
  })

CSS

body {
  background: #000000;
  text-align: center;
}
.container {
  width: 500px;
  display: inline-block;
  transform: translateY(200px);
}
.bar {
  background: #FFFFFF;
  width: 10px;
  height: 100px;
}
.bar1 {
  float: left;
}
.bar2 {
  float: right;
}
.ball {
  background: #FFFFFF;
  width: 10px;
  height: 10px;
  position: relative;
  top: 45px;
  left: 10px;
}

Thank you for your kind help!

P.S. The code here, has been updated!

Issue Analytics

State:
Created 2 years ago
Comments:10

Top GitHub Comments

1reaction

Lukas-Batemacommented, Oct 13, 2021

it worked,

the path of the folder where there is anime.es.js was wrong and named “anime-master”, so i simply changed the name folder to the regulary “animejs”, and changed the path of import :

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

EDIT : i also deleted the animejs script tag on my html file

And my animation worked.

thanks a lot !

No problem! I’m glad it worked!

1reaction

Lukas-Batemacommented, Oct 12, 2021

I have the same issue, animations don’t work, and i think it’s because the import method, and the browser you using. I saw this subject on stackoverflow dealing about issues with firefox, same as me. the way you put your script tag too is important.

Look at the link : stackoverflow.com/questions/42237388/syntaxerror-import-declarations-may-only-appear-at-top-level-of-a-module

Is there also a problem with the use of jquery ? An other issue was telling about the last version of anime.js that it could be too recent for some system or configuration.

I think that i made good all the necessary steps to install anime.js following the official recommendations :

npm install on VScode

link the script tag to my HTML document

i’ve tried to import in 2 or 3 different ways the module in my js file in order to make the anime variable working ( beacause it throwed me an error at first, telling me that anime variable was not recognised or something like that)

So i’ll try what i said and what you said, and i’ll go back to check …

Yeah, I have tried it using an ES6 module, a require statement, and as a script tag reference. I am using jquery as well, but even without it, wit the examples on its repo, it still doesn’t seem to be working on any of my browsers I have, and I have 4 of them.

EDIT: I got it to work!