Simulating additive animations using Web Animations API issue with getComputedStyle(element).transform

Question

I need to "simulate" additive animations using Web Animations API.

As described in the documentation additive animations are not supported yet and the use of getComputedStyle(element) is suggested.

The problem I am facing is that the matrix3d returned by getComputedStyle(element).transform probably does not contain enough information on perspective, so if I am using as start keyframe, animations are not the same (issue with Red box).

In this example, the blue box has the desired animation, red box animation is not correct:

I would like to know: - If a solution to this problem exists - If the implementation of additive animations would support transform with perspective.

Thanks for your time.

var elem = document.getElementById('target');
var style = window.getComputedStyle(elem);

elem.animate([{
  transform: style.transform // using matrix3d returned from getComputedStyle()
}, {
  transform: 'rotateY(179deg) scaleZ(2) translateZ(200px)'
}], {
  duration: 3000
});

var elem2 = document.getElementById('target2');
elem2.animate([{
  transform: 'rotateY(-179deg) scaleZ(2) translateZ(200px)'
}, {
  transform: 'rotateY(179deg) scaleZ(2) translateZ(200px)'
}], {
  duration: 3000
});

#wrapper,
#wrapper2 {
  perspective: 1000px;
}

#target,
#target2 {
  position: absolute;
  top: 100px;
  width: 200px;
  height: 300px;
}

#target {
  left: 100px;
  background-color: red;
  transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
}

#target2 {
  left: 400px;
  background-color: blue;
  transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
}

<div id="wrapper">
  <div id="target">wrong animation</div>
</div>

<div id="wrapper2">
  <div id="target2">correct animation</div>
</div>

Part of the problem seems to be because `-179deg` can also be thought of as `181deg` so the animation which uses matrix seems to be going from 181deg to 179deg (which is a very small rotation that may not be obvious to the eye) unlike a -179 to 179deg rotation (which is a 358deg swing). So when using matrix the way to do this seems to be to set the initial rotation at 181deg, add an intermediate keyframe for 0deg rotation such that the animation is from 181deg to 0deg to 179deg. [Here](https://jsfiddle.net/pgf24u30/1/) is a demo of what I mean. — Harry, Jan 13 '17 at 12:04
But as you can see it still does not look 100% correct. The red box doesn't move as much to the left as the blue one does and so maybe some more correction is needed. If this helps you any bit, I can add it as an answer. — Harry, Jan 13 '17 at 12:05
@harry I already answered something in this line to a previous question: http://stackoverflow.com/q/41589653/1926369 — vals, Jan 13 '17 at 16:37

score 1 · Accepted Answer · answered Jan 13 '17 at 17:03

You have some different problems in the snippet.

The main one is that the target elements are positioned different respect to the parent. (One has a left value higher than the other). Since the perspective value is in the wrapper, the perspective origin is also, and so it's very difficult to make them match.

I have redone the snippet that show that there is not a real issue with the perspective, when this problems are solved.

But there is still the problem with the missing information, as discussed in a previous question, that as I said is unsolvable.

var elem2 = document.getElementById('target2');
var style = window.getComputedStyle(elem2);


var elem = document.getElementById('target');
elem.style.transform = style;

#wrapper,
#wrapper2 {
  width: 200px;
  height: 300px;
  border: solid 1px blue;
  top: 100px;
  position: absolute;
}
#wrapper {
  left: 400px;
}
#wrapper2 {
  perspective: 1000px;
  left: 600px;
}
#target,
#target2 {
  width: 200px;
  height: 300px;
  position: absolute;
}
#target {
  background-color: red;
  transform: perspective(1000px) rotateY(-45deg) scaleZ(2) translateZ(200px);
}
#target2 {
  background-color: blue;
  transform: rotateY(-45deg) scaleZ(2) translateZ(200px);
}

<div id="wrapper">
  <div id="target">wrong animation</div>
</div>

<div id="wrapper2">
  <div id="target2">correct animation</div>
</div>

Simulating additive animations using Web Animations API issue with getComputedStyle(element).transform

1 Answers1