demo/anijs.html

<!DOCTYPE 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" />
  <title>AniJS demo</title>

  <link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
  <link rel="stylesheet" href="demo.css"/>

  <script src="../dist/gridstack-all.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>AniJS demo</h1>
    <div>
      <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
    </div>
    <h4>Widget added</h4>
    <br>
    <div class="grid-stack"></div>
  </div>

  <script type="text/javascript">
    let grid = GridStack.init();
    let self = this;
    grid.on('added', function(e, items) {
      // add anijs data to gridstack item
      for (let i = 0; i < items.length; i++) {
        items[i].el.setAttribute('data-anijs', 'if: added, do: swing animated, after: $removeAnimations, on: $gridstack');
      }
      AniJS.run();
      self.gridstackNotifier = AniJS.getNotifier('gridstack');
      // fire added event!
      self.gridstackNotifier.dispatchEvent('added');
    });

    function addWidget() {
      grid.addWidget({w: Math.floor(1 + 3 * Math.random()), h: Math.floor(1 + 3 * Math.random())});
    };

    let animationHelper = AniJS.getHelper();

    //Defining removeAnimations to remove existing animations
    animationHelper.removeAnimations = function(e, animationContext) {
      document.querySelectorAll('.grid-stack-item').forEach( function(el) {
        el.removeAttribute('data-anijs');
      });
    }

    addWidget();
  </script>
</body>
</html>