Skip to content

Instantly share code, notes, and snippets.

@mzgoddard
Created October 27, 2017 04:13
Show Gist options
  • Save mzgoddard/ab919b88f99d6a73844afc20e00a705f to your computer and use it in GitHub Desktop.
Save mzgoddard/ab919b88f99d6a73844afc20e00a705f to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/nizudaz/9
<!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>
<style id="jsbin-css">
.column {
display: inline-block;
width: 100px;
}
.box {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="root">
<div class="column">
<div class="box" onclick="swap(); return false;">Box Text</div>
</div>
<div class="column">
</div>
</div>
<script src="https://mzgoddard.github.io/ba-uap/dist/boxart-mutation-observer.d048a043529f80827c15.js"></script>
<script id="jsbin-javascript">
const {animate, present, update} = BoxArt;
const animations = {
box: {
default: {
update: update.context(({
object, value,
}) => (
object({
left: value(el => el.getBoundingClientRect().left),
})
)).compile()(),
animate: animate.context(({
object, begin, end, constant, value,
}) => (
object({
left: value((t, state, begin, end) => (end - begin) * t + begin),
})
.duration(0.3)
)).compile()(),
present: present.context(({
style, translate, key, end, constant,
}) => (
style({
transform: translate([key('left').to(end).px()]),
opacity: constant(0.5),
})
)).compile()(),
}
}
};
// console.log(animations.box.default.update.copy);
new BoxArt.default({animations}).observe(document.getElementById('root'));
let swapI = 0;
window.swap = function() {
const nextParent = document.getElementsByClassName('column')[(++swapI) % 2];
const box = document.getElementsByClassName('box')[0];
box.parentNode.removeChild(box);
nextParent.appendChild(box);
};
</script>
<script id="jsbin-source-css" type="text/css">.column {
display: inline-block;
width: 100px;
}
.box {
width: 100px;
height: 100px;
background: blue;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">const {animate, present, update} = BoxArt;
const animations = {
box: {
default: {
update: update.context(({
object, value,
}) => (
object({
left: value(el => el.getBoundingClientRect().left),
})
)).compile()(),
animate: animate.context(({
object, begin, end, constant, value,
}) => (
object({
left: value((t, state, begin, end) => (end - begin) * t + begin),
})
.duration(0.3)
)).compile()(),
present: present.context(({
style, translate, key, end, constant,
}) => (
style({
transform: translate([key('left').to(end).px()]),
opacity: constant(0.5),
})
)).compile()(),
}
}
};
// console.log(animations.box.default.update.copy);
new BoxArt.default({animations}).observe(document.getElementById('root'));
let swapI = 0;
window.swap = function() {
const nextParent = document.getElementsByClassName('column')[(++swapI) % 2];
const box = document.getElementsByClassName('box')[0];
box.parentNode.removeChild(box);
nextParent.appendChild(box);
};
</script></body>
</html>
.column {
display: inline-block;
width: 100px;
}
.box {
width: 100px;
height: 100px;
background: blue;
}
const {animate, present, update} = BoxArt;
const animations = {
box: {
default: {
update: update.context(({
object, value,
}) => (
object({
left: value(el => el.getBoundingClientRect().left),
})
)).compile()(),
animate: animate.context(({
object, begin, end, constant, value,
}) => (
object({
left: value((t, state, begin, end) => (end - begin) * t + begin),
})
.duration(0.3)
)).compile()(),
present: present.context(({
style, translate, key, end, constant,
}) => (
style({
transform: translate([key('left').to(end).px()]),
opacity: constant(0.5),
})
)).compile()(),
}
}
};
// console.log(animations.box.default.update.copy);
new BoxArt.default({animations}).observe(document.getElementById('root'));
let swapI = 0;
window.swap = function() {
const nextParent = document.getElementsByClassName('column')[(++swapI) % 2];
const box = document.getElementsByClassName('box')[0];
box.parentNode.removeChild(box);
nextParent.appendChild(box);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment