Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="BoxArt animation with MutationObserver">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="root">
    <div class="column">
      <div class="box" onclick="swap(); return false;">Click This</div>
    </div>
    <div class="column">
       
    </div>
  </div>
<script src="https://mzgoddard.github.io/ba-uap/dist/0.2.0-alpha.10/boxart-functions.js"></script>
<script src="https://mzgoddard.github.io/ba-uap/dist/0.2.0-alpha.10/boxart-mutation-observer-no0.js"></script>
​
</body>
</html>
 
.column {
  display: inline-block;
  width: 100px;
}
​
.box {
  width: 100px;
  height: 100px;
  background: blue;
  color: white;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: arial;
  user-select: none;
}
​
 
const {update, animate, present} = BoxArt.functions;
const animations = {
  box: {
    default: {
      update: update.rect(),
      animate: animate.object({
        left: animate.begin().to(animate.end()),
        top: animate.begin().to(animate.end())
      })
      .duration(0.3),
      present: present.style({
        transform: present.translate([
          present.key('left').to(present.end).px(),
          present.key('top').to(present.end).px()
        ])
      })
    }
  }
};
​
new BoxArt.MutationObserver.default({animations})
.observe(document.body);
​
// Add the box to the DOM after observing has started.
const box = document.getElementsByClassName('box')[0];
box.parentNode.appendChild(box);
​
let swapI = 1;
window.swap = function() {
  const nextParent = document.getElementsByClassName('column')[(++swapI) % 2];
  const box = document.getElementsByClassName('box')[0];
  box.parentNode.removeChild(box);
  nextParent.appendChild(box);
};
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x