anime transform overriding the elements existing transform

button {

z-index: 387;
width: 133px;
border-width: 0px;
-webkit-transform: matrix(0,-1,1,0,-2,135);
-ms-transform: matrix(0,-1,1,0,-2,135);
transform: matrix(0,-1,1,0,-2,135);
margin-bottom: -2px;
position: relative;
margin-right: -10000px;
margin-top: -2px;
left: 307px;
background: transparent url(../images/thumb3.jpg?crc=39550032) no-repeat center center;
background-size: cover;

} “button” already have a transform-matrix. Now if I apply translateX animation var anim = anime({ targets: button, translateX: 200, duration: config.transition_time, delay: function(el, i) { return i * 1; }, easing: config.ease + ‘Sine’, update : onUpdate, complete : onComplete });

Now button’s transform matrix is overridden, however I want bot the transforms to merge/exist together

[juliangarnier]

@maaizelahi : @alexchantastic is right, and setting the initial transform values in your animation is the proper way to achieve what you want to do.

@alexchantastic Agreed, unfortunately getting the initials transforms values with getComputedStyle is tricky It will return a transform matrix, and the code needed to decode and extract the values from the matrix will double the size of the library!

[alexchantastic]

@HauntedSmores, yes that is correct. Anime will ignore (overwrite) existing transform properties. For example if you wanted to go from translateX(100%) to translateX(0%) you would need the following regardless of if transform: translateX(100%); was defined in your CSS:

anime({
  targets: 'div',
  translateX: [100%, 0%]
});