Compositing incompatible animations

Testing compositing animations which cause a change in the composition compatibility.

by flackr

HTML

<!DOCTYPE html>
<html>
<body>

<p>
Testing compositing the following animations together:
</p>
<div class="animations">
  <p>wiggle:</p>
  <div class="target"></div>
  <pre>
  [
    {'transform': 'translateX(10px)'},
    {'transform': 'translateX(-10px)'},
    {'transform': 'translateX(10px)'}
  ]
  </pre>
  <p>spin:</p>
  <div class="target"></div>
  <pre>
  [
    {'transform': 'rotateZ(720deg)'}
  ]
  </pre>
</div>

<div class="examples">
  <p>
  When adding the 'wiggle' and 'spin', the spin animation is completely removed due to matrix interpolation caused by the underlying animation:
  </p>
  <div class="target" id="A"></div>
  <p>
  If instead each animation is interpolated separately we get the expected combined effect:
  </p>
  <div id="B1"><div class="target" id="B2"></div></div>
</div>
</body>
</html>

CSS

.target, .target > div {
  display: block;
  width: 50px;
  height: 50px;
}

.target {
  background: green;
}

JavaScript

var animations = {};

function $(id) {
  return document.getElementById(id);
}

var options = {
  duration: 2000,
  iterations: Infinity,
  composite: 'add',
};

function init() {
  var div = document.querySelector('.animations');
  var names = div.querySelectorAll('p');
  var targets = div.querySelectorAll('.target');
  var keyframes = div.querySelectorAll('pre');
  for (var i = 0; i < names.length; i++) {
    var name = names[i].textContent.replace(':', '');
    animations[name] = JSON.parse(keyframes[i].textContent.replace(/'/g, '"'));
    targets[i].animate(animations[name], options);
  }
}

init();

function apply(animName, elems) {
  for (var i = 0; i < elems.length; i++) {
    $(elems[i]).animate(animations[animName], options);
  }
}

apply('wiggle', ['A', 'B1']);
apply('spin', ['A', 'B2']);