Animation Not Running on Site Load #778

luni-moon · 2021-09-22T13:32:29Z

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!

sadeghbarati · 2021-09-22T16:35:27Z

Hi first of all dont spam issues! you must konw that if you call yourself founder

second import or ES6 statement is not supported by by default in older browser;

search about Javascript bundlers like:
rollup - parcel - vite - webpack

luni-moon · 2021-09-22T19:59:46Z

Hi first of all dont spam issues! you must konw that if you call yourself founder

second import or ES6 statement is not supported by by default in older browser;

search about Javascript bundlers like:

rollup - parcel - vite - webpack

I didn't spam issues, they were two totally different ones. Also, two issues really is not spamming. Second of all, my browsers are up to date. Heck, I just got one of the computers that I tested it on.

The definition of "spam", is such: Spamming is the use of messaging systems to send multiple unsolicited messages (spam) to large numbers of recipients.

Which one, one of them was meant specifically for maintainers, so that throws out the spam argument, two: they are helpful to the community, because nobody really asked for, or didn't ask for it, which means it isn't unsolicited. Therefore, it isn't spam Also, I would like to point out that, one was a question, unrelated to this issue. Therefore, concluding this is not spam. Since they were two completely different issues, you really should not be putting them into the same issue, and they should be separate, therefore, again, concluding that this is not spam.

For those who are wondering why I am making a huge fuss about this, check out my other, completely unrelated to this issue, issue, and see why this isn't considered spam. Issue Number 779

Okay, let's say you still want to call it spam, go ahead, that doesn't change why I think it is not, or anything. I just hope you read the definition earlier in this post, so you understand where I am coming from, before reconsidering your accusation of spam. Thanks!

Best Wishes,
Lukas Batema

P.S. Please do not think I am mad, as I am thankful that you helped me with the JS Bundlers, out of my 5-ish years of web development, I never heard of any of them. I think it will work, after I figure out how to set it up. Thanks!

P.S.S I tried webpack, but it did not work. I guess, thanks for trying to help?

Fefe973 · 2021-10-12T11:28:30Z

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 : https://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 ...

luni-moon · 2021-10-12T11:35:24Z

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!

Fefe973 · 2021-10-13T10:17:11Z

OK can you explain me how you got it work for your case ?

luni-moon · 2021-10-13T11:42:56Z

OK can you explain me how you got it work for your case ?

Sure, so I put my script tag at the bottom of the <body>...</body> tag, but still inside of it, with the type being module. I also used NPM to install animejs. Here is an example HTML, JS and CSS File, taken directly from this repo's example folder.

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>animejs</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>
    <h2>No specified width</h2>
    <div class="container no-specified-width">
      <svg viewBox="0 0 256 112">
        <path id="noSpecifiedWidth" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
        <rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
      </svg>

      <div class="dom-el color-green"></div>
    </div>

    <h2>Specified width</h2>
    <div class="container specified-width">
      <svg viewBox="0 0 256 112" width="200" height="200">
        <path id="specifiedWidth" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
        <rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
      </svg>

      <div class="dom-el color-green"></div>
    </div>

    <h2>preserveAspectRatio with specified width</h2>
    <div class="container preserveAspectRatio">
      <svg viewBox="0 0 256 112" width="200" height="200" preserveAspectRatio="xMidYMid slice">
        <path id="preserveAspectRatio" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
        <rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
      </svg>

      <div class="dom-el color-green"></div>
    </div>

    <script src="main.js" type="module"></script>
  </body>
</html>

JS

import anime from 'animejs';

const path = anime.path('#noSpecifiedWidth');
anime({
  targets: ['.no-specified-width .dom-el', '.no-specified-width .rect-el'],
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  duration: 3000,
  loop: true,
  easing: 'linear'
});

const specifiedWidthPath = anime.path('#specifiedWidth');
anime({
  targets: ['.specified-width .dom-el', '.specified-width .rect-el'],
  translateX: specifiedWidthPath('x'),
  translateY: specifiedWidthPath('y'),
  rotate: specifiedWidthPath('angle'),
  duration: 3000,
  loop: true,
  easing: 'linear'
});

const preserveAspectRatioPath = anime.path('#preserveAspectRatio');
anime({
  targets: ['.preserveAspectRatio .dom-el', '.preserveAspectRatio .rect-el'],
  translateX: preserveAspectRatioPath('x'),
  translateY: preserveAspectRatioPath('y'),
  rotate: preserveAspectRatioPath('angle'),
  duration: 3000,
  loop: true,
  easing: 'linear'
});

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

h2 {
  margin-bottom: 20px;
}

.container {
  position: relative;
  margin-bottom: 20px;
}

.container > svg {
  width: 100%;
  box-shadow: 0px 0px 1px 1px red;
  overflow: visible;
}

.dom-el {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  border: 2px solid currentColor;
}

Fefe973 · 2021-10-13T14:15:28Z

Ok Thanks, it seems to be better but it's not enough :

First, i put type "module" in <script src="anime.min.js"></script> and not in the script tag of my js file.
After, Import method for firefox is not the same as other browser like chrome. I must use :
import * as anime from "/anime.js"
In chrome, i can use the same method as the repo but i must put a "/" before the name of the module otherwise it don't work :
import anime from '/animejs';
And finally, i still have an issue but this time i get this message :

GET http://127.0.0.1:5500/animejs net::ERR_ABORTED 404 (Not Found)

Same with firefox. So this is about the network now. I'm using live server on VScode, is it the point ? Should i get a paid regular server in order to make things work ? or free emulation server like XAMPP could handle that ? Or is it an other thing ?

luni-moon · 2021-10-13T14:25:02Z

Ok Thanks, it seems to be better but it's not enough :

First, i put type "module" in <script src="anime.min.js"></script> and not in the script tag of my js file.

After, Import method for firefox is not the same as other browser like chrome. I must use :

import * as anime from "/anime.js"

In chrome, i can use the same method as the repo but i must put a "/" before the name of the module otherwise it don't work :

import anime from '/animejs';

And finally, i still have an issue but this time i get this message :

GET http://127.0.0.1:5500/animejs net::ERR_ABORTED 404 (Not Found)

Same with firefox. So this is about the network now. I'm using live server on VScode, is it the point ? Should i get a paid regular server in order to make things work ? or free emulation server like XAMPP could handle that ? Or is it an other thing ?

Don't use the source file, just download it from npm and link your own js file with the animations you made in it (with type module), and add the import statements as usual for ES6 Modules. I also used an VSCode Server, and it worked. I am not home right now, but will check on my Firefox browser when I get a chance. Just try the code I gave, in a new blank folder, without modifications, just for testing.

Fefe973 · 2021-10-13T15:41:06Z

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 !

luni-moon · 2021-10-13T15:50:33Z

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!

luni-moon mentioned this issue Oct 4, 2021

Question: Repo Future #779

Open

luni-moon closed this as completed Oct 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animation Not Running on Site Load #778

Animation Not Running on Site Load #778

luni-moon commented Sep 22, 2021 •

edited

Loading

sadeghbarati commented Sep 22, 2021

luni-moon commented Sep 22, 2021 •

edited

Loading

Fefe973 commented Oct 12, 2021

luni-moon commented Oct 12, 2021 •

edited

Loading

Fefe973 commented Oct 13, 2021

luni-moon commented Oct 13, 2021

Fefe973 commented Oct 13, 2021 •

edited

Loading

luni-moon commented Oct 13, 2021 •

edited

Loading

Fefe973 commented Oct 13, 2021 •

edited

Loading

luni-moon commented Oct 13, 2021

Animation Not Running on Site Load #778

Animation Not Running on Site Load #778

Comments

luni-moon commented Sep 22, 2021 • edited Loading

Issue

Code

HTML

JS

CSS

sadeghbarati commented Sep 22, 2021

luni-moon commented Sep 22, 2021 • edited Loading

Fefe973 commented Oct 12, 2021

luni-moon commented Oct 12, 2021 • edited Loading

Fefe973 commented Oct 13, 2021

luni-moon commented Oct 13, 2021

HTML

JS

CSS

Fefe973 commented Oct 13, 2021 • edited Loading

luni-moon commented Oct 13, 2021 • edited Loading

Fefe973 commented Oct 13, 2021 • edited Loading

luni-moon commented Oct 13, 2021

luni-moon commented Sep 22, 2021 •

edited

Loading

luni-moon commented Sep 22, 2021 •

edited

Loading

luni-moon commented Oct 12, 2021 •

edited

Loading

Fefe973 commented Oct 13, 2021 •

edited

Loading

luni-moon commented Oct 13, 2021 •

edited

Loading

Fefe973 commented Oct 13, 2021 •

edited

Loading