Get the computed Translate X and Y values of a given DOM element. Based on https://stackoverflow.com/questions/21912684/how-to-get-value-of-translatex-and-translatey

getComputedTranslateXY.ts

function getTranslate(item: HTMLElement): number | number[] | undefined {
    const transArr = [];
    if (!window.getComputedStyle) {
      return;
    }
    const style = window.getComputedStyle(item);
    const transform = style.transform || style.webkitTransform;
    let mat = transform.match(/^matrix3d\((.+)\)$/);
    if (mat) {
      return parseFloat(mat[1].split(', ')[13]);
    }
    mat = transform.match(/^matrix\((.+)\)$/);
    mat ? transArr.push(parseInt(mat[1].split(', ')[4], 10)) : transArr.push(0);
    mat ? transArr.push(parseInt(mat[1].split(', ')[5], 10)) : transArr.push(0);

    return transArr;
  }

mat ? transArr.push(parseFloat(mat[1].split(', ')[4])) : transArr.push(0);
mat ? transArr.push(parseFloat(mat[1].split(', ')[5])) : transArr.push(0);

If you need comatibility with this ******** IE9 + :

         function getTranslate(item) {
                var transArr = [];

                if (!window.getComputedStyle) return;
                var style     = getComputedStyle(item),
                    transform = style.transform || style.webkitTransform || style.mozTransform || style.msTransform;
                var mat       = transform.match(/^matrix3d\((.+)\)$/);
                if (mat) return parseFloat(mat[1].split(', ')[13]);

                mat = transform.match(/^matrix\((.+)\)$/);
                mat ? transArr.push(parseFloat(mat[1].split(', ')[4])) : transArr.push(0);
                mat ? transArr.push(parseFloat(mat[1].split(', ')[5])) : transArr.push(0);

                return transArr;
            }

if u need scale and x/y percent

getComputedScaleXY = el => {
  if (!window.getComputedStyle || !el) return false;

  const style = getComputedStyle(el);
  const transform =
    style.transform || style.webkitTransform || style.mozTransform;

  let mat = transform.match(/^matrix3d\((.+)\)$/);

  if (mat) return parseFloat(mat[1].split(', ')[13]);

  mat = transform.match(/^matrix\((.+)\)$/);

  const data = {};

  data.scale = mat ? parseFloat(mat[1].split(', ')[3]) : 0;

  data.x = mat ? parseFloat(mat[1].split(', ')[4]) : 0;
  data.y = mat ? parseFloat(mat[1].split(', ')[5]) : 0;

  data.xPercent = data.x === 0 ? 0 : data.x / (el.offsetWidth / 100);
  data.yPercent = data.y === 0 ? 0 : data.y / (el.offsetHeight / 100);

  return data;
};

Typescript Version

getTranslate(item): any {
    const transArr = [];
    if (!window.getComputedStyle) {
      return;
    }
    const style = window.getComputedStyle(item);
    const transform = style.transform || style.webkitTransform || style.mozTransform || style.msTransform;
    let mat = transform.match(/^matrix3d\((.+)\)$/);
    if (mat) {
      return parseFloat(mat[1].split(', ')[13]);
    }
    mat = transform.match(/^matrix\((.+)\)$/);
    mat ? transArr.push(parseInt(mat[1].split(', ')[4], 10)) : transArr.push(0);
    mat ? transArr.push(parseInt(mat[1].split(', ')[5], 10)) : transArr.push(0);

    return transArr;
  }

@neofuture that would kinda defy the point of TS. It would be more beneficial to type the return and argument.

function getTranslate(item: HTMLElement): number | number[] | undefined {
    const transArr = [];
    if (!window.getComputedStyle) {
      return;
    }
    const style = window.getComputedStyle(item);
    const transform = style.transform || style.webkitTransform;
    let mat = transform.match(/^matrix3d\((.+)\)$/);
    if (mat) {
      return parseFloat(mat[1].split(', ')[13]);
    }
    mat = transform.match(/^matrix\((.+)\)$/);
    mat ? transArr.push(parseInt(mat[1].split(', ')[4], 10)) : transArr.push(0);
    mat ? transArr.push(parseInt(mat[1].split(', ')[5], 10)) : transArr.push(0);

    return transArr;
  }

Maybe but to save some one changing it, if they do need it

const transArr = [];

It appears you need to type this to avoid type errors further down:

const transArr: number[] = [];