3

I just started using animeJS and it's a nice library.

However, I wanted to make use of the stagger function, as found in the documentation and my console is giving me the following message when I want to use the stagger function.

"anime.stagger is not a function"

So, I am wondering if the cdn that I am using might be outdated or I missed something else along the way. Otherwise the code I had, until wanting to use the stagger function, is working.

        <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="main.css">
      <title>Document</title>
    </head>
    <body>

      <h1>Design for Grid</h1>

      <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>




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


      <script> 

      let tl = anime.timeline({
        easing: 'easeOutExpo',
        duration: 750
      });

      //Add children
      tl.add({
        targets: 'section div',
        backgroundColor: 'rgb(111,193, 243)',
        delay: anime.stagger(300)
    })


        </script>
      </body>
    </html>
Dan
  • 111
  • 1
  • 13

2 Answers2

3

I had the same problem. I fixed it by downloading and using the newest version: 3.0.1. You can find it here.

JCB90
  • 83
  • 6
  • Yeah, that's what I gave as an answer but did not recognize it yet. So I'll accept yours for the effort. Thx! – Dan Mar 26 '19 at 21:06
0

The CDN was outdated since the newest version of animeJS is out. Namely, 3.0.1

Do'h!

Google should remove those from the top positions. JK :=)

Dan
  • 111
  • 1
  • 13