Awesome ! You did a really great job !
The only problem I see : they failed on 3D initial parameter (translateZ(1px)) :
The webanimation failed because you handle a 3D matrix as a 2D matrix, making it failed.
The matrix version failed because it reset the 3D matrix to a 2D matrix.
So you need to make use of matrix.is2D (or check for /matrix3d/ to change the algorithm used but its seems quite painful to do.
Here is a solution of the problem without the need of parsing the matrix data (just generate a 2D translation matrix and multiply it to the current matrix), with this solution you don't need to care about the 2D-3D stuff : jsfiddle.net/vthibault/9Lqyphkm/
I updated to include 3d, and also to account for when the animation ends, in case it's desired to chain the animation calls. I still prefer to directly set the parameters instead of performing the multiply operation (which can be a lot of multiply-add operations, and a potential source rounding errors if floating points are used).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Awesome ! You did a really great job !
The only problem I see : they failed on 3D initial parameter (translateZ(1px)) :
So you need to make use of
matrix.is2D(or check for/matrix3d/to change the algorithm used but its seems quite painful to do.Here is a solution of the problem without the need of parsing the matrix data (just generate a 2D translation matrix and multiply it to the current matrix), with this solution you don't need to care about the 2D-3D stuff : jsfiddle.net/vthibault/9Lqyphkm/
I updated to include 3d, and also to account for when the animation ends, in case it's desired to chain the animation calls. I still prefer to directly set the parameters instead of performing the multiply operation (which can be a lot of multiply-add operations, and a potential source rounding errors if floating points are used).