Unable to use anime js

302 Views Asked by kushagra kartik At 17 May 2025 at 12:49

I installed anime js through npm and followed all the steps on the github, however the text is not animating

Here are my HTML and JS codes

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link rel="stylesheet" href="app.css">
    <title>Anime Demo</title>
</head>
<body>
    <script src="index.js"></script>
    <script src="node_modules/animejs/lib/anime.min.js"></script>
    <div><h1>This is a header!!</h1></div>
</body>
</html>

JS:

let anime = require('animejs')
let div = document.querySelectorAll('div')
anime({
    targets: div,
    translateX: 250,
    rotate: '1turn',
    backgroundColor: '#FFF',
    duration: 800
});

Original Q&A

There are 1 best solutions below

T J On 02 May 2021 at 10:37

According to the documentation of targets, it needs to be a selector, i.e a String.

So your code should be:

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div>
  <h1>This is a header!!</h1>
</div>

Unable to use anime js

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANIME.JS

Trending Questions

Popular # Hahtags

Popular Questions