Member Avatar for davy_yg

Hello all,

I am trying to understand how to use animation.js:

This is what I did:

And the result is only HTML text. I expect to see : http://animejs.com/documentation/#functionBasedDuration

The first animation appears. I wonder what's lacking. My link to the js is already correct:

<html>
<head>

<script src="anime-master/anime.min.js"></script>

<script>
    var cssSelector = anime({
    targets: '#cssSelector .el',
    translateX: 250
});
</script>

</head>
<body style="background-color: gray;">

HTML

<div id="cssSelector">
  <div class="line">
    <div class="square el"></div>
  </div>
</div>

</body>

</html>
  • 2 Contributors
  • 2 Replies
  • 272 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by davy_yg
Member Avatar for gentlemedia

You forgot to copy the CSS that belongs to the classes line and square. You can see the accosiated CSS by using inspect or inspect element (right click context menu in your browser) pointing on a square.

Member Avatar for davy_yg

I already put a link to css and it still does not works out.

<html>
<head>

<link rel="stylesheet" href="anime-master/documentation/assets/css/documentation.css">
<link rel="stylesheet" href="anime-master/documentation/assets/css/anime.css">

<script src="anime-master/anime.min.js"></script>

<script>
    var cssSelector = anime({
    targets: '#cssSelector .el',
    translateX: 250
});
</script>

<script>
    var el = document.querySelector('#JSarray .el-01');

    var JSarray = anime({
        targets: [el, '#JSarray .el-02', '#JSarray .el-03'],
        translateX: 250
    });
</script>
</head>
<body>

HTML

<div id="cssSelector">
  <div class="line">
    <div class="square el"></div>
  </div>
</div>

<div id="JSarray">
  <div class="line">
    <div class="square el-01" style="transform: translateX(250px);"></div>
  </div>
  <div class="line">
    <div class="square el-02" style="transform: translateX(250px);"></div>
  </div>
  <div class="line">
    <div class="square el-03" style="transform: translateX(250px);"></div>
  </div>
</div>

</body>

</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.