TwenMax mouse parallax effect

by uto usui

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div id="wrap">
  <img data-mouse-parallax=".05" src="https://source.unsplash.com/random/300x300/" alt="">
  <h1 data-mouse-parallax=".1">Skew Element</h1>
</div>

SCSS

#wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  display: inline-block;
  margin-top: 100px;
  margin-left: -2rem;
  padding: 3rem 2rem;
  background-color: rgba(white, .9);
  border: 5px solid currentColor;
}

img {
  box-shadow: 0 0 20px rgba(black, .5);
}

JavaScript

const skewElement = () => {

  const mouseMovefn = (e) => {

    let xMouse = e.pageX - e.currentTarget.getBoundingClientRect().left - (e.currentTarget.offsetWidth / 2),
        yMouse = e.pageY - window.pageYOffset - e.currentTarget.getBoundingClientRect().top - (e.currentTarget.offsetHeight / 2);

    let mouseElements = [...e.currentTarget.querySelectorAll('*[data-mouse-parallax]')];

    mouseElements.forEach(elem => {

      let factor = elem.dataset.mouseParallax,
          xFinal = xMouse * factor,
          yFinal = yMouse * factor;

      if (!elem.dataset.mouseSkew) {

        TweenMax.to(elem, 1.2, {
          x: xFinal,
          y: yFinal,
          skewX: xFinal * 0.2,
          skewY: xFinal * 0.2
        });

      } else {

        TweenMax.to(elem, 1.2, {
          x: xFinal,
          y: yFinal
        });

      }

    });

  };

  const mouseleavefn = (e) => {

    const mouseElements = Array.from(e.currentTarget.querySelectorAll('*[data-mouse-parallax]'));

    mouseElements.forEach(elem => {

      TweenMax.to(elem, 1.2, {
        x: 0,
        y: 0,
        skewX: 0,
        skewY: 0
      });

    });

  };

  let app = document.querySelector('#wrap');
  app.addEventListener('mousemove', mouseMovefn);
  app.addEventListener('mouseleave', mouseleavefn);

};
skewElement();