0

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
20
Views
1 Month
Discussion Span
Last Post by davy_yg
0

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.

0

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>
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.