<div class="wrap">
    <div class="line">
      <div class="left">
        <div class="content">
          <span class="spanSlow">Aladdin</span>
        </div>
      </div><!--
      --><div class="right">
        <div class="content">
          <span class="spanSlow">Aladdin</span>
        </div>
      </div>
    </div>
    <div class="line">
      <div class="left">
        <div class="content">
          <span class="spanSlow">What do</span>
        </div>
      </div><!--
      --><div class="right">
        <div class="content">
          <span class="spanSlow">what do</span>
        </div>
      </div>
      </div>
      <div class="line">
          <div class="left">
            <div class="content">
              <span class="spanFast">you</span>
            </div>
          </div><!--
          --><div class="right">
            <div class="content">
              <span class="spanFast">you</span>
            </div>
          </div>
        </div>
        <div class="line">
            <div class="left">
              <div class="content">
                <span class="spanSlow">want</span>
              </div>
            </div><!--
            --><div class="right">
              <div class="content">
                <span class="spanSlow">want</span>
              </div>
            </div>
          </div>
</div>
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line {
  width: 100vw;
}
.left, .right {
  width: 50vw;
  overflow: hidden;
  display: inline-block;
}
.left {
  color:pink;
  transform: skew(0deg, -15deg);
}
.right {
  color: black;
  transform: skew(0deg, 15deg);
}
.left .content {
  width: 100vw;
  text-align: center;
}
.right .content {
  width: 100vw;
  text-align: center;
  transform: translate(-50vw);
}
span {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
  line-height: .8;
  transition: ease-out .6s;
}
// The place I saw this effect:
// https://angle2.agency/

// Red Staper made a NICE tutorial about this effect! You should check it out!
// https://www.youtube.com/watch?v=LgiadQQM6mo&t=5s

window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('resize', handleWindowResize);

const spansSlow = document.querySelectorAll('.spanSlow');
const spansFast = document.querySelectorAll('.spanFast');

let width = window.innerWidth;

function handleMouseMove(e) {
  let normalizedPosition = e.pageX / (width/2) - 1;
  let speedSlow = 100 * normalizedPosition;
  let speedFast = 200 * normalizedPosition;
  spansSlow.forEach((span) => {
    span.style.transform = `translate(${speedSlow}px)`;
  });
  spansFast.forEach((span) => {
    span.style.transform = `translate(${speedFast}px)`
  })
}
//we need to recalculate width when the window is resized
function handleWindowResize() {
  width = window.innerWidth;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.