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>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<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-react-dom-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()
        ])
      })
    }
  }
};
​
class App extends React.Component {
  render() {
    const box = (this.state || {}).box || 0;
    return (<div className="columns">
      <div className="column">{(box % 2) === 0 ? <div className="box" onClick={() => {this.setState({box: 1})}}>Click This</div> : null}</div>
      <div className="column">{(box % 2) === 1 ? <div className="box" onClick={() => {this.setState({box: 0})}}>Click This</div> : null}</div>
    </div>);
  }
}
​
ReactDOM.render(<BoxArt.React.default animations={animations}>
  <App />
</BoxArt.React.default>, document.body);
​
Output

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

Dismiss x