LottieWebAnimation.js

class LottieWebAnimation extends React.Component {
  
  /*
  .. render()...
  */
  
  // Capturing mouse move
  onMouseMove = (e) => {
    this.mouseCoords.x = e.clientX || e.pageX;
    this.mouseCoords.y = e.clientY || e.pageY;
  }

  // Set up the matrices
  onIntroDone() {
    const Gs = this.refs.svg.querySelectorAll('svg > g > g > g');

    Gs.forEach((node, i) => {
      // Get id node
      const src = node.querySelector('image').getAttribute('href').split('/');
      const id = src[src.length - 1].split('?')[0].split('.')[0];

      const asset = DICTIONARY.assets.filter((asset) => asset.id === id)[0];

      if (!asset) {
        console.log('havent found any asset using', id);
        return;
      }

      // Use transform attribute and reformate it by adding space to have it working on every browser
      const styleArr = node.getAttribute('transform').split(',');
      styleArr[0] = styleArr[0].replace('matrix(', '');
      styleArr[5] = styleArr[5].replace(')', '');

      const style = `matrix(${styleArr[0]}, ${styleArr[1]}, ${styleArr[2]}, ${styleArr[3]}, ${styleArr[4]}, ${styleArr[5]})`;

      // Parse the current matrix value using Rematrix
      const transform = Rematrix.parse(style);

      this.matrices.push({
        node,
        transform,
        id,
        prevTransform: transform,
        speed: asset.speed,
        limitX: asset.limitX,
        limitY: asset.limitY,
      });
    })

    this.update();
  }
  
  update() {

    let x =  this.mouseCoords.x - (this.props.browser.width / 2);
    let y =  this.mouseCoords.y - (this.props.browser.height / 2);

    const diffX = (this.mouseCoords.prevX - x);
    const diffY = (this.mouseCoords.prevY - y);

    this.mouseCoords.prevX = x;
    this.mouseCoords.prevY = y;

    this.matrices.forEach((matrix, i) => {

        const limitMinTX = matrix.transform[12] + matrix.limitX[0];
        const limitMaxTX = matrix.transform[12] + matrix.limitX[1];
        const limitMinTY = matrix.transform[13] + matrix.limitY[0];
        const limitMaxTY = matrix.transform[13] + matrix.limitY[1];

        let tx = diffX * matrix.speed;
        let ty = diffY * matrix.speed;

        let nextTx = matrix.prevTransform[12] + tx;
        let nextTy = matrix.prevTransform[13] + ty;

        if (tx !== 0 && nextTx < limitMinTX) tx = limitMinTX - matrix.prevTransform[12];
        if (tx !== 0 &&  nextTx > limitMaxTX) tx = limitMaxTX - matrix.prevTransform[12];
        if (ty !== 0 &&  nextTy < limitMinTY) ty = limitMinTY - matrix.prevTransform[13];
        if (ty !== 0 &&  nextTy > limitMaxTY) ty = limitMaxTY - matrix.prevTransform[13];

        tx = Math.round(tx);
        ty = Math.round(ty);

        let translate = Rematrix.translate(tx, ty);
        const product = [matrix.prevTransform, translate].reduce(Rematrix.multiply);

        // For a given matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)
        // We have a matrix(a, b, c, d, tx, ty)
        // Therefore:
        const css = `matrix(${product[0]}, ${product[1]}, ${product[4]}, ${product[5]}, ${product[12]}, ${product[13]})`;

        matrix.prevTransform = product;
        matrix.node.setAttribute('transform', css);
     })

     window.requestAnimationFrame(this.update);
  }
  
 }