Home>
Please tell me why anime.js does not start.

Attaching the source code picked up on the Internet and trying to check it on the browser,
There was no reaction.

I want it to work like this link. [http://tobiasahlin.com/moving-letters/#11](URL)

The source code is shown below.
<! DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>YOKABIO</title>
        <link rel = "stylesheet" href = "style.css">
    </head>
    <body>
        <h1>
          <span>
            <span></span>
            <span>HELLO GOODBYE</span>
          </span>
        </h1>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
        <script type = "text/javascript" src = "animation.js"></script>
    </body>
</html>
. ml11 {
  font-weight: 900;
  font-size: 3.5em;
}
.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}
.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: #fff;
  transform-origin: 0 50%;
}
.ml11 .line1 {
  top: 0;
  left: 0;
}
.ml11 .letter {
  display: inline-block;
  line-height: 1em;
}
// Wrap every letter in a span
$('. ml11 .letters'). each (function () {
  $(this) .html ($(this) .text (). replace (/ ([^ \ x00- \ x80] | \ w)/g, "<span class = 'letter'>$&&lt ;/span>"));
});
anime.timeline ({loop: true})
  .add ({
    targets: '.ml11 .line',
    scaleY: [0,1],
    opacity: [0.5,1],
    easing: "easeOutExpo",
    duration: 700
  })
  .add ({
    targets: '.ml11 .line',
    translateX: [0, $(". ml11 .letters"). width ()],
    easing: "easeOutExpo",
    duration: 700,
    delay: 100
  }). add ({
    targets: '.ml11 .letter',
    opacity: [0,1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-= 775',
    delay: function (el, i) {
      return 34 * (i + 1)
    }
  }). add ({
    targets: '.ml11',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
  • Answer # 1

    There is an error in the browser development tool, so let's check it first.

    The reason why it doesn't work is
    The jscript itself is not read even though the javascript processing is described using jquery.

    It seems that version 1.12.2 is used on the posting URL site.
    https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js

    If you want to make reference to the posted URL page,

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>


    Before that, it seems better to write a description that reads the jquery body.

  • Answer # 2

    anime.js itself works alone, but if you want to write in a way that depends on jQuery, load it.